background problem

[harry_matharoo]

Can anybody tell me,
why the position of the background image of any element don’t change if we change the margin of that element.
harry matharoo

[wolfcry911]

collapsing margins

you really need to be more specific and maybe show an example…

[harry_matharoo]

[chrisburton]

Where is your style tag? It should look like this:

[harry_matharoo]

Sorry chrisburton I think that i done a foolish mistake while copy pasting.

Now from your code i want to know if i change the margin of the element but there is no effect on background img position.

[chrisburton]

@harry_matharoo Can we see a link to the site?

[djdaniel150]

Harry, why are you using margins to position your elements? Also, I noticed that you specified that margin with a pixel value. Pixel values are fixed values, no good when it comes to positioning elements. You should consider using absolute positioning for all your elements. why? Because not all screens are the same size, have the same resolution, the same size pixels, and its no longer 1999 anymore. Here’s a tutorial on positioning elements in CSS using absolute positioning:
[Positioning elements in CSS](http://www.pctechauthority.com/css-positioning-part-2.html “Absolute Positioning with CSS”)
Yeah, don’t use pixel values to position, use percentages instead. When you use a percentage value, then the browsers pre processor will map out the same percentage of the screen regardless of the screens resolution, size of pixels, or size of screen.
This works very well for mobile design as well. You should also consider checking out media queries, which you can use to render a single webpage on any device, including tablets and smart phones.

[djdaniel150]

Also, don’t position background images of your document body using fixed pixel values! All that “float: left;”, “margin-right: 45px;” stuff is nonsense. I’m not sure why people are still using these fossilized methods. With absolute positioning your elements will be placed within an exact set of coordinates from the top-left, or bottom-right of the screen, which completely does away with margins and padding altogether. Consider this, you develop a page on a screen that is 1024×768 using fixed pixel values. Now, will that same page render appropriately on alternate screens, say 1366×768, 800×600, 1900×1024, etc? Don’t count on it! You can also set the “width: 40%;” and “height: 55%” values using percentages as well. Stick with those percentages and you will have a fluid and adaptive webpage.

Another reason to use percentages, as I stated, not all devices have the same size pixels, and comparing a pixel on a smart phone to a pixel on a wide screen desktop PC is like comparing apples and oranges.

Also, when specifying background images in CSS use the “background-size: contain;”, or “background-size: cover;” properties. Contain will attempt to force the image to fill the entire space of the specified element (for instance if your elements dimensions are “width: 40%;” and “height: 35%;”, contain will attempt to crop the entire element to fill all of that elements specified dimensions). Or, use the cover property, this will cause the browsers pre processor to attempt to to stretch the height and width of the element to fill the pages entire space when you specify this attribute value in your CSS body.

[Watson90]

@djdaniel150, I don’t think I ever use

position: absolute;

on any website I have ever made except for styling a dropdown menu. I also don’t see a problem with floating elements, especially as long as you make sure you use them efficiently and clear them accordingly.

Using absolute positioning _can_ come in handy in some circumstances don’t get me wrong, but I don’t see why you’re treating it like the king of CSS properties.

> You should consider using absolute positioning for all your elements.

This I totally disagree with.

[Paulie_D]

Frankly, without seeing the bg image &/or site in question I don’t see how anyone can offer a ‘proper’ solution to this issue. We don’t know what the OP is trying to do.

---

>Using absolute positioning can come in handy in some circumstances don’t get me wrong, but I don’t see why you’re treating it like the king of CSS properties.

Seconded.

[harry_matharoo]

Firstly i have to say thanks to djdaniel150 for his help,

djdaniel150, i am using margin , padding and float css property only to set an element position on the page because some one told me that it is the best way for design a website with this property. And he also ask me to not to use position: absolute | fixed | relative . Is he guiding me right or not please help me .

And tell me he best way to position my elements in the html page

[Author]

Posts