So here is the the thing.
I have footer div.
I wanted to create a nice background to it.
There will be an image in the center.
Background will extend to infinity to left with X bg pattern
Background will extend to infinity to right with Y bg pattern
Like this;
XXXXXXXXXXXXXXimageYYYYYYYYYYYYY
Following code didnt do it.
What am I doing wrong?
.subcontent {
min-height:50px;
width:100%;
background:#00CC66;
}
.leftcontent {
float:left;
min-height:50px;
width:100%;
background:url(images/bg_lpattern.jpg) repeat-x;
}
.rightcontent {
float:right;
min-height:50px;
width:100%;
background:url(images/bg_rpattern.jpg) repeat-x;
}
<div class="subcontent">
<div class="leftcontent">
</div>
<img src="images/bg.jpg" alt="Insert Logo Here" name="Insert_logo" width="400px" height="50px" />
<div class="rightcontent">
</div>
</div>
This may be complicated if you don't know exact dimensions of logo and your layout is fluid.
Width: 100% will stretch div to 100% and make next floating div to go to next line.
Why not use a large background image that will be say 1x6000px and make a y-repeat on it: you will cover the centre of it with overlaying image anyway so it matters not if you have anything under there or not.
Try this:
<div class="subcontent" style='width:100%; background: url("images/bg_pattern.jpg") repeat-y scroll center top #00CC66; border: 0 none; min-height:50px; text-align:center;'>
<img src="images/bg.jpg" alt="Insert Logo Here" name="Insert_logo" width="400px" height="50px" />
</div>
Where bgpattern.jpg is a loooong thin image... or if you need it to be some nice background (not just stretched one line of colour) then make it a huge image 3000x6000 or so and use it as a background - it will still work the same - centred under logo and sides will extend until you reach 6000px resolution.
Related
<div style="max-height:80px;overflow:hidden"><img src="http://placehold.it/100x100"></div>
The lower 20px of the above image will be hidden, aka the image is aligned with the top of the container. I want the image to be aligned with the bottom of the container, so the upper 20px will be hidden instead of the lower 20px.
The image's height in my real project is unknown, so I can not use margin/translate etc to reposition the image. Absolute position is definitely one of the ways, as well as jQuery, I just wonder if there is any other way, like vertical-align.
Wen,
You have to use relative and absolute path.
HTML
<div class="container">
<img src="http://placehold.it/100x100" alt="img" class="img_path" />
</div>
CSS
.container{position:relative; width:80px; height:80px; max-width:80px; max-height:80px; overflow:hidden; border:1px solid #ddd;}
.img_path{position:absolute; bottom:0; left:0;}
For More Info JSFiddle
Im wanting to align 3 divs together, but i want the left div to stretch 100% left, the right 100% right with the middle div having a fixed width.
Basically I'm trying to create a header for my website with the logo in the middle and the background seemingly stretching out forever but the logo has transparency so I can't just overlay one ontop of the other.
I have done this using tabels at the moment like below but wondered if there was a better (css) way of doing it?
The Real issue being that the background of the logo in the center of the banner needs to be transparent so i cant have any overlapping divs?
Here is my example done using the following method but would prefer to use CSS if possible?
LINK: example
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<th scope="col" style="width:50%; height:123px; background-image:url(style/images/header_bckdrp.png); background-repeat:repeat-x"></th>
<th scope="col"><img src="style/images/header_logo.png" width="122" height="123" alt="Header_logo"></th>
<th scope="col" style="width:50%; height:123px; background-image:url(style/images/header_bckdrp.png); background-repeat:repeat-x"></th>
</tr>
</table>
I don't know if this method will work for what you are trying to achieve, but you can horizontaly center the image and then apply a background color, so it will cover the background image. You shouldn't be using empty elements, they are semantically incorrect. It's up to you though.
Take a look at this codepen.
This should work for you:
<style type="text/css>
#left, #right{
position:absolute;
top:0px;
width:50%;
height:50px;
}
#left, #headerpattern_left, #rightsticky{
left:0px;
}
#right, #headerpattern_right, #leftsticky,{
right:0px;
}
#headerpattern_left, #headerpattern_right{
position:absolute;
background:url(pattern.png) repeat-x;
width:45%;
}
#leftsticky, #rightsticky{
position:absolute;
}
#logo{
position:relative;
width:50px;
height:50px;
margin:0px auto;
}
</style>
<body>
<div>
<div id="left">
<div id="headerpattern_left">
</div>
<div id="leftsticky>
<img src="correctly_measured_image_of_pattern_on_left_side_of_logo.jpeg" />
</div>
</div>
<div id="right">
<div id="headerpattern_right">
</div>
<div id="rightsticky>
<img src="correctly_measured_image_of_pattern_on_right_side_of_logo.jpeg" />
</div>
</div>
<div id="logo">
</div>
</div>
</body>
EDIT: new suggestion
Off the top of my head, you could create two divs within each of the left and right divs and create a jpeg of how the pattern should look 100px either side of the logo and have them stick right next to the logo, then use the same repeating background on the divs next to the jpegs.
This should work in most cases, but in a few instances it will not look perfect, such as if the webpage is viewed on a gigantic screen or zoomed out quite far. Also, I'm not sure how it will look on mobile devices.
I am trying to have a header image with a border at the top of my page above my content area but for some reason my bg image is repeating. Do you know what is causing the image to repeat? Any help is greatly appreciated!
Here is my code:
<div class="container_12">
<div class="subheader">
<img src="images/subheader_1.png" alt="Subheader" width="940px" height="240px" />
</div>
</div>
here is my CSS:
.subheader{background:url(../images/subheader_1.png);background-repeat:no-repeat; min-height:300px; width:940px}
.subheader img {border:1px solid #ccc;padding:5px;background:#efefef}
You've only specified the background attribute in your css. This is a global attribute expecting all settings defined there. To couple the background-repeat with an image you have to use background-image:
Edit:
Based on your edit and posted screen shot, it looks like you don't have a repeating image so much as you've included the image in both the background AND an image tag. You should pick one or the other, but to get it to line up right, you need to remove the padding and margin:
.subheader img {
border:1px solid #ccc;
padding:5px; <--- TAKE THIS OUT
margin: 0px; <--- ADD THIS
background:#efefef
}
I'm trying to build an image slider (no problems with the js!):
<div id="wrapper">
<div id="inside">
<img src="pic1">
<img src="pic2">
<img src="pic3">
<img src="pic4">
</div>
</div>
with the following style:
#wrapper{position:relative; width:300px; overflow:hidden;}
#inside{position:relative;}
#inside img{width:140px;}
When the width of the images (pic1,2,3,4) is greater than the width of the #wrapper(i.e. 300px), the rest of the images are moved to another line, i.e, instead of
pic1 pic2 pic3 pic4
I get
pic1 pic2
pic3 pic4
How can I fix this.
Increase the size of your #inside div to the size of your images and just hide all that extra space with overflow:hidden in your #wrapper div.
So it will be something like this:
#wrapper{position:relative; width:300px; overflow:hidden; }
#inside{position:relative; width:500px; }
I don't understand - what's the point of the 300px wrapper if your images inside are bigger? Unless you absolutely position them, they're of course going to wrap if they're too wide.
I have a site that has a fairly complicated footer, see http://www.roadsafetyforchildren.co.uk/, not really sure how to attempt to build it:
I've split the image up into two parts, the first part below needs to be horizontally centered but sit below the content:
The second part needs to repeat horizontally but stay in line with the image above.
Therefore the two images needs to look like the first image at the top of the question.
I can match the two images up IF the content div above it has a fixed height. The problem is the content div NEEDS to be flexible to grow/shrink with the content. Therefore the image at the bottom of the content div moves up and down the page depending on the size of it.
How can I keep the two images lined up with a flexible content div above it?
P.s There's a lot of answers but don't think a few of them have understood the question.
Seems straight forward to me, you will need two divs:
<div id="content">
<div id="inner_content">
<!-- Append image to very bottom -->
<img src="city" width="" height="" alt="" />
</div>
<!-- Background image of hills goes here -->
</div>
CSS is straight forward..
#content { width: 100%; background: url('hills.png') repeat center bottom; }
#inner_content { width: xx; margin: auto; }
try this:
html, body { margin:0; padding:0; min-height:100%;}
html { background: #color url(repeteable.jpg) center bottom repeat-x; }
body { background: white url(footer.jpg) center bottom no-repeat;}
Whatever <div> the content is in should be height:auto and have a background image of five or so pixels high by whatever width and should repeat-y in the css, and the <div class="footer"> should be float:left. That way the footer will always be below the content, and whatever height the content is will have a repeating background.
No need to mess with PS, except to create the bg image for the content.
This would be the bg image for content div, and repeat-y so it repeats from the top down:
And the footer image:
And if you make the 'background repeat' image a png, you could make the drop shadow opaque to accommodate the change in the body bg image.
You can position a background inside an element:
div#footer {
background: url('roadpic.jpg') bottom center no-repeat;
}
<div id="content">your content goes here</div>
<div id="footer">...</div>
which will keep the footer div below the content at all times.
You will need a common anchor point for both the backgrounds. Between a horizontally-resizable window and a content area that is less than 100% of the window width, the only point that can remain constant between the two containers is the horizontal centre of the body.
So your hills background will need to be centred on the body or some other container that has 100% of window width. The road image can either be fixed-position inside a fixed-width centred container (shown in the example below), or centred inside a centred variable-width container.
The resulting CSS will be something like this:
div#wrapper {
width: 100%;
background: url(hills.jpg) center bottom repeat-x #fff;
}
div#content {
width: 800px;
margin: 0 auto;
/* background can be offset to the left or right if the width is fixed
if not it must be centred */
background: url(road.png) right bottom no-repeat;
}
And the HTML:
<body>
<div id="wrapper">
<div id="content">
<p>Some content here</p>
</div> <!-- content -->
</div> <!-- wrapper -->
</body>
The backgrounds of both the containers will have same anchor point and they'll move together as the window is resized!
Because #content is a child of #wrapper, they'll remain aligned vertically because #wrapper will get taller as #content gets taller (unless #content is a float, in which case you'll have to use the :after clearing trick; or if #content is position:absolute, you'll need to align them manually or with javascript).