homepage Welcome to WebmasterWorld Guest from 174.129.80.166
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Background Image Fit Browser Window
Tury




msg:4364650
 5:35 am on Sep 20, 2011 (gmt 0)

Please if someone can help me with my delema.
I have got a background image that's set in any browser window that's exactly that i need but i do not know how to make that image scrolling with my website content? So i need this image to fit in any browser window and sticked with my web page content.
This is the code i've got here below:
<html>
<head>
<style type="text/css">

html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
img { border: 0; }

img#back
{
position: fixed;
left: 0px;
top: 50px;
width: 100%;
height: 35%;
z-index: -1;

}

div#content
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>

</head>

<body>
<img id="back" src="http://www.example.com/shop/images/H3025.jpg
" alt="" title="" />
<p>How to make this image that fit browser window scrolling with page content</p>
<p>How to make this image that fit browser window scrolling with page content</p>
<p>How to make this image that fit browser window scrolling with page content</p>
<p>How to make this image that fit browser window scrolling with page content</p>
</body>

</html>

Please help any one.
Thanks Andrey

[edited by: alt131 at 5:39 am (utc) on Sep 20, 2011]
[edit reason] Thread Tidy - Examplifying [/edit]

 

lucy24




msg:4364932
 7:30 pm on Sep 20, 2011 (gmt 0)

Buying time...

I'm having trouble with the two terms "scrolling" and "fit browser window". Generically: "scrolling" implies that one thing is bigger than another thing, so you have to move (sideways, vertically or both). But "fit browser window" implies that both things are the same size (which can only be done with backgrounds in CSS3).

Also, you're calling it background but treating it as an ordinary image. Wouldn't it be easier to do {background-image}?

Do you want the image to stay in the same place on the screen, no matter where on the page the user is? (Here I emphasized "screen" and "page" because they're different things.) Putting a fixed element behind a non-fixed element is not a recipe for happiness.

Confession: I'm getting queasy trying to visualize the page. Or screen. As a user, I think it would make me feel that the image was stalking me ;)

birdbrain




msg:4364967
 8:56 pm on Sep 20, 2011 (gmt 0)

Hi there Tury,

and a warm welcome to these forums. ;)

Here is an example for you to try...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>background-size</title>

<style type="text/css">
html,body {
height:100%;
margin:0;
background-image:url('http://www.webmasterworld.com/gfx/logo.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-size:100% 100%;
}
#container {
width:600px;
padding:30px;
border-right:2px solid #c4876e;
border-left:2px solid #c4876e;
margin:auto;
background-color:#000;
opacity:0.75;
filter:alpha(opacity=75);
font-family:arial,sans=serif;
font-size:20px;
}
#container p {
margin:0 0 20px 0;
color:#fff;
text-indent:20px;
}
#container p:first-letter {
font-family:'times new roman',serif;
font-size:40px;
color:#c4876e;
line-height:0.8;
text-shadow: #f00 0 0 10px;
}
</style>

</head>
<body>

<div id="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida
sollicitudin molestie. Morbi venenatis justo vitae nisi aliquam pharetra.
Integer sed est at quam faucibus lobortis. Maecenas ut est vel risus
tincidunt consectetur. Suspendisse eget egestas nulla. Sed arcu odio,
faucibus suscipit suscipit eu, consectetur ac purus. Mauris vel velit
elit, vitae tempor neque. Suspendisse pretium nisi vel risus dapibus
dignissim eu quis ligula. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Proin vulputate dapibus
lectus nec lacinia. Phasellus suscipit dui at lectus cursus quis
pretium quam dictum. Fusce eget purus elit, sit amet aliquam nunc.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.
</p><p>
Sed dignissim condimentum risus, eget interdum risus pretium non. Ut
condimentum luctus libero, tincidunt aliquam risus blandit id. Nullam
arcu dolor, consequat quis dignissim malesuada, venenatis et risus. Sed
feugiat elit sapien. Maecenas ipsum eros, ultricies interdum lobortis
quis, eleifend quis erat. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Sed quis tristique justo.
Vivamus mi tellus, laoreet id rhoncus non, mattis vehicula purus. Sed
ullamcorper nunc eget leo lobortis blandit. Pellentesque eu tellus in
tellus porta pharetra eu et lectus. In non tempor nibh.
</p><p>
Suspendisse potenti. Vivamus laoreet odio in orci porta consequat.
Vestibulum rutrum viverra sem, nec tincidunt nunc congue ut. Proin in
orci arcu. Pellentesque quam sem, rutrum a dapibus et, dignissim eget
ligula. Nullam vel ipsum in tellus mattis blandit et vitae elit.
Suspendisse potenti.
</p>
</div>

</body>
</html>

birdbrain

Tury




msg:4365539
 7:58 pm on Sep 21, 2011 (gmt 0)

Thanks guys for your replay:)
Yes you are right lucy24 it is a tricky task but i probably aproched it from the wrong side.
In the Birdbrain example background is not scrollable and content is on the layout that sits on that background.What i need is content on background so in your example when you zoom out or zoom in CTR+"+" picture of background is disappearing under the layout.

Please have a look what i'm after in here[freeimagehosting.net ]

  • Green area is a background that contain header image and footer tiled scrollable.
  • Blue area is a main content that includes text graphic ect scrollable
  • Gray panel is a Browser Window size Fixed area is suppose to be synchronized with a backgrounds and main content when scrolling all page but remain to be fixed to the browser window size and may also have some content on that like login form for example.

    I hope there is a solution for that as i'm stuck with this.
    Thanks for your help Tury

  • alt131




    msg:4365780
     9:50 am on Sep 22, 2011 (gmt 0)

    Hi Audrey, and welcome to WebmasterWorld :),

    From your explanations I am sure what you want is achievable, but I can't quite visualise the exact detail of this part of the layout.
    Gray panel is a Browser Window size Fixed area is suppose to be synchronized with a backgrounds and main content when scrolling all page but remain to be fixed to the browser window size ...
    I'm sure that makes sense to you ;) - but can you help me to understand by clarifying whether you want the image behind the "content" to be fixed (like Birdbrain's example, which does not scroll at all), or do you want it to act like a normal background-image and scroll with the content (like the <p>'s in the code sample you posted)? Plus, are you also wanting the image to be the full width and height of the browser window?
    Tury




    msg:4366013
     7:57 pm on Sep 22, 2011 (gmt 0)

    Thanks alt131 for participation,

    The trick is that background green, main content blue and grey part (that is image) must be scrollable vertically.Although only grey part must be sticked to the browser window size in the same time.

    In Birdbrain's example background is fixed to the window and grey is a content part and acts as a website content and can not be a solution unfortunately in my case:(

    Hope that will clarify, if not please let me know about it then.
    Thanks again for your help.

    alt131




    msg:4366259
     10:15 am on Sep 23, 2011 (gmt 0)

    Hi Tury, we're getting much closer :)

    This is the sentence that confuses me:
    The trick is that ... and grey part (that is image) must be scrollable vertically.Although only grey part must be sticked to the browser window size in the same time.
    You see, to me "stickied to browser window" means it is fixed in place - and doesn't scroll, so those two sentences read to me that as saying the image should scroll and stay in the same place - at the same time.

    Of course I'm sure that's not what you mean ... so I wonder if you just really want the image to be the full width of the browser window (viewport). Something like this:

    /////////////Logo/ header image///////////////////
    /////////////////////////////////////////////////////
    ***********************************
    ****Image that scrolls with the content****
    *******************"***************
    |||||||||||////////////////////////////////////////
    |||||||||||////////////////////////////////////////
    |||||||||||////////////////////////////////////////
    |||||||||||////////////////////////////////////////
    //////////Footer///////////////////////////////////
    /////////////////////////////////////////////////////

    If you want the image to be "sticky" - or "fixed", then it would be more like this:

    /////////////Logo/ header image///////////////////
    /////////////////////////////////////////////////////
    ***********************************
    ****Image that is fixed *****************
    ****and does not move*****************
    |||||||||||////////////////////////////////////////
    |||||||||||////////////////////////////////////////
    |||||||||||////////////////////////////////////////
    |||||||||||////////////////////////////////////////
    //////////Footer///////////////////////////////////
    /////////////////////////////////////////////////////

    Tury




    msg:4366559
     9:46 pm on Sep 23, 2011 (gmt 0)

    Hi Alt131,
    you are right to some extend in terms of image it must keep window browser size what ever wideness of the browser will be, but if the webpage become higher it's got an ability to scroll up and down but being sticked to the browser weight that means that all website conent, background and image are scrollable up and down.

    IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
    IIIIIIIILogo,HEADER,fixed to backgrownd and scrollableIIIIIIIIIII IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
    _____________________________________________________________________
    Image that always keep the browser weigh and scrolls with the content if necessary when the browser too wide it shrinks a bit
    (to look proportional with whole website ) BUT ALWAYS keep
    browser weigh and scrolls
    _________________________________________________________________
    IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
    IIIIII*****************************************************IIIII
    IIIIII*************Website conntent************************IIIII
    IIIIII*************Scrollable, fixed to backgrownd*********IIIII
    IIIIII*****************************************************IIIII
    IIIIII*****************************************************IIIII
    IIIIII*****************************************************IIIII
    IIIIII*****************************************************IIIII
    IIIIII*****************************************************IIIII
    IIIIII*****************************************************IIIII
    IIIIII*****************************************************IIIII
    IIIIII*****************************************************IIIII
    IIIIII*****************************************************IIIII
    IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
    IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
    IIIIIIIIIII Fotter fixed with backgrownd scrollableIIIIIIIIIIIII
    IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
    IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII

    Hope that helps i think it is JS requre function what do you think?
    Regards Andrey and Tury

    alt131




    msg:4368194
     11:08 am on Sep 28, 2011 (gmt 0)

    Hi Audrey and Tury, I don't believe javascript is required for this - I think the problem is the technical terms. You see, you are saying you want the elements to be fixed (so they don't move) and to be scrollable (so they do move) - at the same time. Think of your motor car - you cannot drive it down the road so it is moving, at exactly the same time you keep it parked in your garage so it doesn't move at all. It is either moving down the road (scrolling) or it is parked in one place (fixed): Well, at least my motor car won't do both :)

    As the word "fixed' is causing confusion, I'm going to make a big guess. The following code is a simple centred, fixed-width, single column page with a different background-image for each of the header, content and footer. Can you copy/paste it into your editor, test it in a modern browser (firefox, safari, opera or internet explorer 8+) then tell me if it is the sort of thing you want?

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>My title</title>
    <style type="text/css">

    html {background-color: #aaa}
    body {width:900px; margin:0 auto}
    #header {
    height:200px;
    background: #bbb url(http://www.google.com/images/srpr/logo3w.png) no-repeat;
    background-size: 100% 100%;
    }

    #maincontent {
    height:1000px;
    background: #ccc url(http://picasa.google.com/intl/en/images/logo.jpg) no-repeat;
    background-size: 100% 100%;
    }

    #footer {
    height:200px;
    background: #ccc url(http://www.gstatic.com/picnik/20110920_174529_225.0-RC1/graphics/picnik_logo.gif?rel=20110920174529) no-repeat;
    background-size: 100% 100%;
    }
    </style>
    </head>
    <body>
    <div id="header"><h1>My header</h1></div>
    <div id="maincontent"><h2>My Content Heading</h2>
    <p>A para of content</p>
    </div>
    <div id="footer"><p>My footer</p></div>
    </body>
    </html>

    Global Options:
     top home search open messages active posts  
     

    Home / Forums Index / Code, Content, and Presentation / CSS
    rss feed

    All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
    Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
    © Webmaster World 1996-2014 all rights reserved