homepage Welcome to WebmasterWorld Guest from 54.226.147.84
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Keep background image from moving on window resize
dsawicki78



 
Msg#: 4419575 posted 4:34 pm on Feb 20, 2012 (gmt 0)

Hello, below is a snippet of the css I am using on my site. I have a 1450 px banner that spans the top of the site with a image slider that sits in the middle of my banner. The issue I am having is when the window is re-sized, it forces my background image from right to left over into my slider. I have tried the width:100%; display: table; as you can see to no avail. Any insight would be greatly appreciated.



body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #000;
background-color: #FFF;
background-repeat: no-repeat;
background-position: center top;
width: 100%;
background-image: url(../_images/background10.jpg);
display: table;
}

 

lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4419575 posted 5:23 pm on Feb 20, 2012 (gmt 0)

You have to assign the "width" property to the background itself. And-- tangentially-- using ../ relative links in CSS is more perilous than you can begin to imagine. Sooner or later everyone gets bitten by it.

:: pause to reel in shock because I managed to find something in CSS3 specs ::

:: further pause for Forum moderator to stop laughing ::

[w3.org...]

The property you want is background-size.

Marshall

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4419575 posted 6:21 pm on Feb 20, 2012 (gmt 0)

Kudos lucy :)

Marshall

alt131

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4419575 posted 6:40 pm on Feb 22, 2012 (gmt 0)

:: further pause for Forum moderator to stop laughing ::
Laughing? I'm still in trauma counselling after those threats of slapping with a wet haddock ;)
Anyone unsure this is humour ... wet haddocks don't hurt that much :)

Welcome to WebmasterWorld dsawicki78,

I second Marshall's kudos to Lucy, but had a horrrible thought ... will being able to find things prompt another site re-design? :)

lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4419575 posted 1:22 am on Feb 24, 2012 (gmt 0)

I'm still in trauma counselling after those threats of slapping with a wet haddock

Gosh. I had no idea the thought of wielding a wet haddock was so scary. Possibly you've forgotten that I'm the one who would get slapped, thanks to making a site with light green text on a dark green background. For an encore, I'm thinking of something in a soothing and restful magenta-and-cyan.

will being able to find things prompt another site re-design?

Heavens, you don't think I found it by following links do you? I went straight to Search. The only challenge was identifying the correct Search box. There were two of them, side-by-side, leading to entirely different things.

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.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved