CODEWITHSUNDEEP
htmlcssimagebackground
user961437
user961437

Reputation:

CSS background-image alignment issue

My background image won't align between the divs in this code - I have tried clearing them to no avail. Anyone know what's causing it, or how I can get it to work? CSS in html for convenience.

<div class="header" style="height:200px; background-image: url(bg.png); margin:-8px;">
<img src="logo.png" style="margin-left:auto; margin-right:auto;" />
</div>

<div style="text-align:center;">
    <div style="background-image: url(bg.png);background-position:center;  
display:inline-block; width:90px; border-bottom-left-radius: 20px;">Div 1</div>
    <div style="background-image: url(bg.png);background-position:center;  
display:inline-block; width:400px;margin:-4px;">Div 2</div>
    <div style="background-image: url(bg.png);background-position:center;  
display:inline-block; width:90px;border-bottom-right-radius: 20px;">Div 3</div>
</div>

Here's a fiddle: http://jsfiddle.net/FphKk/

Image: https://i.sstatic.net/TZzj9.png

Upvotes: 0

Views: 2161

Answers (2)

Scott
Scott

Reputation: 21890

Your margins are shifting the divs and therefore their backgrounds causing the stripe misalignment:

No margins: Fiddle here

Added back the inline-block and removed margins in addition to creating a container div with a set width - otherwise the stripes misalign based on window width.

Fiddle here

Upvotes: 1

Gabi Barrientos
Gabi Barrientos

Reputation: 1886

I can't see any background images, but as far as I can tell, the 2nd <div> wouldn't align between the 1st and 3rd <div>, because you used display:inline-block; instead of display:inline;.

http://jsfiddle.net/bcnobel/FphKk/1/

I honestly can't tell what this does to your background image's position, because you didn't set the full url to the image.
I will look into that as soon as you change the url's.

Upvotes: 0

Related Questions