I'm learning CSS at the moment and I am using it on a website to control the layout of the site.
I Have a number of containers, 5 of them, all on top of each other, I have a background for the page but I also want to use a background for one of the containers. So I used the 'background-image:url("");' tag to use a background, the I also used the attachment, repeat. The problem I was the image wasn't setting itself to the container, it was pushing out way past the dimensions that I had set in my CSS code which were height:312px; and width: 1000px;
Here is the CSS
html, body
{
margin-top: 25px;
padding: 0;
background-image:url("../../images/background.png");
background-repeat: none;
background-attachment: fixed;
}
.hidden
{
display: none;
}
#page-container
{
width: 1000px;
margin: auto;
background: transparent;
}
#header
{
height: 130px;
}
#content-top
{
background: #D9D9D9;
background-image:url("../images/pic.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position:right top;
height: 312px;
width: 1000px;
}
Here is the HTML:
<div id="page-container">
<div id="header">
<div id="flashContent">
</div>
</div>
<div id="content-top"><!--<img src="images/pic.png">--></div>
<div id="portfolio-container">
<div id="portfolio1"><p>1</p></div>
<div id="portfolio2">2</div>
<div id="portfolio3">3</div>
<div id="portfolio1"><p>4/p></div>
<div id="portfolio2">5</div>
<div id="portfolio3">5</div>
</div>
<div id="main-content">
main-content
</div>
<div id="footer">Footer</div>
</div>
I haven't pasted all of the CSS but its needed let me know.
Its as if the background is filling a space that is a lot bigger than the space specified.
Last time I needed to do something like this, I did the following:
#background{position:absolute; top:0; left:0; width:100%; max-width:1024; max-height:768; height:auto; z-index:-1; }
And then on my page I included the following:
<img id="background" src="whatever.jpg" alt="" title="" />
And that was it. This actually works quite nicely, with the background image magically resizing itself until one of the dimensions (width or height) reaches the maximum specified.
It doesn't need CSS3 support. Try it and see.
Obviously tweak the positioning stuff if you don't want it to fill the screen (I did).
You will have to set background-size to 100%
It only works in browsers supporting CSS3
Try float:left in #contentTop
Hope that helps!
In css you also have background-size:contain/cover
Related
I have an image (508 x 564) that I want to fit fully into its parent container.
Even with width: 100% or max-width: 100%, this is the biggest the image stretches to. I'm doing a split screen style, where I'm only showing the left side of the split screen (thus, you'll see width: 50% in the CSS.)
HTML:
<div class="mainContainer">
<div class="imageContainer">
<img class="image" src="path/to/image"></img>
</div>
<div class="textContainer">
<h1>Some text here</h1>
</div>
</div>
CSS:
.imageContainer {
width: 50%;
}
.image {
width: 100%;
height: 100%;
background-size: cover;
}
The image should ideally scale up to fit the parent container if I specify width: 100% right? I've also tried max-width: 100% with the same results.
NOTE: I FORGOT TO MENTION THAT I'M WORKING WITH A .SVG FILE. This is probably why it's not behaving the way I expect it to like JPG/PNG files!!!!
-EDIT FOR SVG-
You can display svg images by either using <object>,<embed>,<iframe> or <svg> as follows:
Using the <object> tag:
<object type="image/svg+xml" data="image.svg">
Update your browser to support support SVG <-- displayed if svg is not supported
</object>
Using the <embed> tag:
<embed type="image/svg+xml" src="image.svg" />
Using the <iframe> tag:
<iframe src="image.svg"></iframe>
Using the <svg> tag:
<svg xmlns="http://www.w3.org/2000/svg"></svg>
FOR THE PREVIOUS UNEDITED QUESTION:
-For JPEG/PNG-
Your html and css markup is all messed up. You need to:
Close the div tag
Close the img tag correctly
Close your css properties with a semi-colon
Like this:
HTML:
<div class="mainContainer">
<div class="imageContainer">
<img class="image" src="//i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" />
</div>
<div class="textContainer">
<h1>Some text here</h1>
</div>
</div>
CSS:
.imageContainer {
width: 50%;
}
.image {
width: 100%;
height: 100%;
background-size: cover; <!-- remove this. Only applicable to background images and not inline images -->
}
jsFiddle: https://jsfiddle.net/e0d8my79/192/ <-- 50% width
jsFiddle: https://jsfiddle.net/e0d8my79/194/ <-- 100% width
If you want to use background-size you need to apply the image as the background, not an element.
.imageContainer {
width: 50%;
height: 100px;
background: url('http://placehold.it/50x50') no-repeat center center;
background-size: cover;
}
.image {
width: 100%;
height: 100%;
}
<div class="mainContainer">
<div class="imageContainer">
</div>
<div class="textContainer">
<h1>Some text here</h1>
</div>
</div>
use only max-width:100% for the image selector.
There are a couple issues. You're missing semicolons on the CSS properties, but also, you cannot use background-size on an image that is specified inline.
If you want that image to fill the entire container, you could specify it as a background-image instead and then your background-size property would work. See below.
.image {
background-image: url('path/to/image');
background-size: cover;
}
If you want to scale it up to the maximum, please try the below code.
<img src="your-img" style="max-height:100px;max-width:100px; width:auto; height: auto; position:absolute; margin: auto;">
I am making a header on a HTML page in which I have an image aligned to the left of the page and an image aligned to the right. I want there to be a center background color that is white when I enlarge the page horizontally, and that center white section to minimize to nothing when I shrink the page horizontally. Then the image on the right should be cut of from the right as the page shrinks.
The main problem I'm having is the image on the right goes down below the left image when I shrink the page. How can I fix this? The center section isn't white as well.
HTML:
<div class="navlogo">
<div class="left">
<img src="Weir-Logo.jpg">
</div>
<div class="right">
<img src="compass.jpg" />
</div>
</div>
CSS:
.navlogo {
width:100%;
background-color: white;
}
.navlogo .left {
float:left;
}
.navlogo .right {
float:right;
}
I would go with Turnip's answer, but here's another option for you for variety, if you like tables:
<table style="width:100%;background-color:white">
<tr>
<td align="left">
<img src="Weir-Logo.jpg">
</td>
<td></td>
<td align="right">
<img src="compass.jpg" />
</td>
</tr>
</table>
position: relative for the left image and position: absolute for the right image along with a z-index value on both should get you there:
.navlogo {
width: 100%;
background-color: white;
}
.navlogo .left {
float: left;
}
.navlogo .left img {
position: relative;
z-index: 1;
}
.navlogo .right {
position: relative;
}
.navlogo .right img {
position: absolute;
right: 0;
z-index: 0;
}
<div class="navlogo">
<div class="left">
<img src="http://placehold.it/400x200/f2f2f2/000000">
</div>
<div class="right">
<img src="http://placehold.it/400x200/000000/ffffff" />
</div>
</div>
With the "max-width" style the image will be resize.
<div class="left">
<img style="max-width:30%;" src="Weir-Logo.jpg">
</div>
<div class="right">
<img style="max-width:30%;" src="compass.jpg" />
</div>
So far you've got the old-school strategies covered: tables and position:absolute. Neither meets your requirement for "the image on the right should be cut off from the right as the page shrinks" and both can be problematic for a variety of reasons -- tables are, well, tables; and absolute-positioning, while sometimes necessary, tends to lead to fragile layouts; I try to avoid reaching for that part of the toolbox unless absolutely necessary.
In this situation I would depend on CSS background images, with an #media breakpoint to cover the two different layouts.
With this HTML:
<div class="navlogo"><div></div></div>
This covers the "the screen is wider than both images; put whitespace in between them" case:
.navlogo {
background: url('//placehold.it/250x100') top left no-repeat;
}
.navlogo div {
background: url('//placehold.it/250x100') top right no-repeat;
min-height: 100px;
}
Then, for the "the screen is smaller than the two images, so cut the right-hand one off from the right":
#media screen and (max-width: 500px) {
.navlogo div {
background-position: 250px 0;
}
}
(The #media breakpoint here should be the width of both images added together. The right-hand image's background-position should be the width of the left-hand image. Adjust for body margins/padding as needed.)
If I understood you correctly, you were looking for something like this?
Fiddle: https://jsfiddle.net/7twgsx23/1/
You need to give the navlogo a height value in order to get the white background.
CSS:
.navlogo{
width: 100%;
height: 100px;
background-color: white;
overflow: hidden;
min-width:600px;
}
I also suggest using a middle div to get the desired layout.
HTML:
<div class="middle">
</div>
You can use non-breaking space to fill the middle div if you don't want any content there.
I have an image that is to be used as a background for a series of "slides" that are all contained within one page. There are four slides total. Each slide is the height of the screen. So I need the background to be 4x screen height. I would also like the image to scale with the screen width. The image is very tall and it does not matter what part of the background is on each slide, so keeping aspect ratios shouldnt be a problem.
The issue i am having is that when i make a window with a width smaller than the images width, part of the image gets cut off instead of scaling to the screen width. My css so far:
#container {
position:relative;
height:100%;
}
#background {
position:absolute;
width: 100%;
height:400%;
background:url(photo.png);
}
.slide {
width: 100%;
height:100%;
position:relative;
}
And the HTML:
<div id="container">
<div id="background"></div>
<div class="slide">
Content 1
</div>
<div class="slide">
Content 2
</div>
<div class="slide">
Content 3
</div>
<div class="slide">
Content 4
</div>
</div>
Note, must be compatible with IE8 and above (ie CSS3 stuff)
Maybe you could use something like that:
<div id="background">
<img src="img.jpg" class="stretch" alt="" />
</div>
and than in css
#background {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:100%;
}
I dont know why you dont want to use css3, maybe you got some good purpose, but still I'd recommend to use that.
css3 code is :
background-size: 100%;
You can use Css3 property Background-size
#background {
background-size: 100%;
}
This is probably a very common question. However I have tried to use every answer on the web, but for some strange reason there seems to be a clash in my stylesheet.
I have a background with an image (cloth) pattern that repeats over the full content.
Now I am trying to add one left and right border image (with threads, to make it look like a realistic cloth) to #container2, that repeats vertically down. But every time I do this, the whole container moves down, and when I adjust the position, it disappears.
The code I have is as following:
<div id="container">
<div id="container2">
<div id="header">
....................content...............
</div>
</div>
</div>
CSS:
#container { background: #323232 url(images/container-bg.png) repeat; position: relative; }
#container2 { background: url(images/container-bg-right.png) repeat; min-height: 300px; padding: 0px 0 0px 3%; max-width: 1000px; margin: 0 5% 0 5%; }
#header { margin-bottom:50px; }
Thank you in advance.
You can set multiple images for your backgrounds warning this isn't support by all browsers just yet
So your html could be:
<div id="container">
<div id="inset-borders">
-- Content --
</div>
</div>
CSS:
#inset-borders {
background-image:url('left-border.png') left repeat-y, url('right-border.png') right repeat-y;
}
Wouldn't you want:
<div id="container"> </div>
<div id="container2"> </div>
<divid="header"> </div>
Or do you want "container2" inside of "container"
Hi Guys I have this site:
http://www.ryansammut.com/orijen/
Basically so far I managed to make the top part strech as a background, now I need to make the other parts too. I'm not sure how to do it, so I'm asking for ideas how this would be done best, keeping the positioning all relative and the background image would adjust according to the needed content area.
PS. This is only needed for resolutions greater than 1280px, so zoom out if you need to see what's happening.
You can not stretch those elements because they are contained in a div named 'wrapper', which has a maximum width of 1280px.
add the following properties to : header, contentbackground, and footer:
margin-left:auto;
margin-right:auto;
this will make sure the elements are centered.
then remove the width property from #wrapper, and add the background to it so it reads as follows :
#wrapper {
position: relative;
margin: 0 auto;
top: 0px;
padding: 0px;
background-image: url(../images/contentBG.png);
}
However, now we won't see the horizontal stretch of the header anymore, so we need to move #header above #wrapper.
<div id="header">
...
</div>
<div id="wrapper">
...
</div>
Don't use tables, use DIVs only.
No need to include FlowPlayer script two times.
I dont see you use JQuery (no need to include that).
Replace Dreamweaver's rollover images with proper CSS:
.item {background: image.jpg}
.item:hover {background: image_rollover.jpg}
Get sprite images (you can read here: http://css-tricks.com/css-sprites/)
As the original question... you have to use two DIVs for each "row", like this:
#header_wrapper {
float: left;
width: 100%;
background: header_backgroud.jpg;
}
#menu_wrapper {
float: left;
width: 100%;
background: menu_backgroud.jpg;
}
#content_wrapper {
float: left;
width: 100%;
background: content_backgroud.jpg repeat center top;
}
.wrapper {
margin: 0 auto;
width: 1260px;
}
<div id="header_wrapper">
<div class="wrapper">
--- header content ---
</div>
</div>
<div id="menu_wrapper">
<div class="wrapper">
--- menu content ---
</div>
</div>
<div id="content_wrapper">
<div class="wrapper">
--- page content ---
</div>
</div>
You need to change the structure to something like this:
<div id="header">
<div>
<ul>Nav</ul>
</div>
</div>
<div id="mainContent">
<div>Content</div>
</div>
<div id="footer">
<div>Content</div>
</div>
Then the CSS could look something like this:
div#header { width: 100%; background: black; }
div#header div { width: 600px; margin: 0 auto; background: url(...); }
div#mainContent { width: 100%; background: url(...); }
div#mainContent div { width: 600px; margin: 0 auto; }
div#footer { width: 100%; background: black; }
div#footer div { width: 600px; margin: 0 auto; }
It is fast written, hope you can see the idea? I can't see why you would go with position absolute or relative. Use margin: 0 auto; to center divs instead :)