There is a background image with 4 different colors as you see. I'm not sure how to turn this into HTML so that it covers the whole page (horizontally). I have the following code:
body{
background: url(http://uupload.ir/files/y7l4_bg.png) repeat-x;
}
.upper{
background: url(http://uupload.ir/files/ur8m_cloud.png);
height:600px;
}
<body>
<!-- upper section -->
<div class="upper">
This is the upper section
</div>
<!--end upper section-->
</body>
But clearly it doesn't work as expected. What am I missing here?
body{
background: url(http://uupload.ir/files/y7l4_bg.png) repeat-x;
margin: 0;
padding: 0;
}
.upper{
background: url(http://uupload.ir/files/ur8m_cloud.png);
height:600px;
background-repeat:no-repeat;
background-position: center top;
background-size: contain;
}
<body>
<!-- upper section -->
<div class="upper">
This is the upper section
</div>
<!--end upper section-->
</body>
Quite simply the body isn't tall enough to show all of that image as the only thing in it is the upper div.
body {
background: url(http://uupload.ir/files/y7l4_bg.png) repeat-x;
height: 2513px; /* image height*/
}
See this fiddle
Regardless, using a massive background image like that is probably not the optimum method, especially when that layout and presentaton could be simply achieved with minimal HTML & CSS.
Related
I have a div on the top of the page that is assigned a parallax image, when the view port is not that wide the image is not responsive, how can I make the background image responsive ?
#parallax{
height:100vh;
background:url("../images/keyboard.jpg");
background-size: cover;
background-attachment: fixed;
}
<div id="parallax">
<div class="col-md-1"></div>
<div id="profile" class="bottom-align col-md-4">
</div>
</div>
and here are the screenshots of what I mean by unresponsive
basically I want "web site" to show when the view port is not wide as well instead of "WE"
background-size: cover is scaling your background image to fill the whole height of the containing element which on a mobile device is tall and narrow, cropping the image.
You should either use background-size: contain instead of cover, or allow the containing element to shrink to less than 100vh. The caveat with the former is you need to figure out what to fill the rest of the container with.
Here's an example:
.target {
background: url(http://placekitten.com/300/100);
background-position: center center;
background-color: teal;
background-size: cover;
background-repeat: no-repeat;
height: 150px;
width: 100px;
}
.better {
background: url(http://placekitten.com/300/100);
background-position: top center;
background-color: teal;
background-repeat: no-repeat;
background-size: contain;
height: 150px;
width: 100px;
}
<html>
<body>
Cover:
<br>
<div class="target"></div>
Contain:
<br>
<div class="better"></div>
<div>
Original:
<br>
<img src="http://placekitten.com/300/100" ?>
</div>
</body>
</html>
Have your image width be 100%. I put the image tags inside the divs to represent screen sizes.
<div style="width:20%">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Triforce.svg/691px-Triforce.svg.png" style="width:100%">
</div>
<div style="width:40%">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Triforce.svg/691px-Triforce.svg.png" style="width:100%">
</div>
<div style="width:60%">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Triforce.svg/691px-Triforce.svg.png" style="width:100%">
</div>
<div style="width:80%">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Triforce.svg/691px-Triforce.svg.png" style="width:100%">
</div>
<div style="width:100%">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Triforce.svg/691px-Triforce.svg.png" style="width:100%">
</div>
A straightforward solution would be :
Make your body size stretch to the whole view-port
body{
width:100%;
height:100%;
/* on the example due to some overflow I've used 97% to prevent scroll bars
....
make your background image fill the body element
background-image:url(...);
background-position:cover;
And that's it,
To live a white space for your header offset your image position down, by the width of your header.
background-position:50px;
The inconvenience is when you want to have actual content you can't rely on the same style sheet for the other pages, you have to change it.
Of course you won't see any responsiveness in the example here because the way the snippet is in a fixed width container. But it has work as expected when tested. (at least you can see how the image is stretched compared to the original one here )
.header{
border:solid ;
width:100%;
height:50px;
text-align:center;
}
body{
width:97%;
height:97%;
background-repeat:no-repeat;
background-image:url(https://i.stack.imgur.com/AWVa6.jpg);
background-position:0 50px;
background-attachment:fixed;
background-size:cover;
}
<div class="header">your header or navigation bar</div>
I'm trying to set up a vertical navigation bar with CSS using Dreamweaver CS6, but I'm very new to CSS and had been away from Dreamweaver from version 3 until recently. I have separate classes for the top, middle, and bottom images in this nav bar. I've made the entire divs for each button be a link, using this technique.
The middle buttons display just fine in design view, live mode, and the browser preview. But the top and bottom buttons are only showing up in design view. The hover and active states work fine for all buttons. I've checked and double-checked all of the file paths, cleared Dreamweaver's cache, and restarted Dreamweaver.
Why would this happen? How can I fix it?
Here's the related source code. I'm using the 12-column 960 grid system.
<!-- This is inside a container_12 div with the site's header/navigation, then a clear, then an <h3> -->
<div class="container_12">
<!-- Header with site's logo and navigation goes here -->
<div class="clear"></div>
<h3>Page header</h3>
<div class="grid_9 prefix_2 suffix_1">
<!-- Several paragraphs of copy using <p> tags -->
<div class="homePageVerticalButtonTop">
<div class="verticalNavigationText"><a style="display:block" href="top.html">top link</a></div>
</div>
<div class="homePageVerticalButtonMiddle">
<div class="verticalNavigationText"><a style="display:block" href="middle1.html">middle link 1</a></div>
</div>
<!-- Several more middle links -->
<div class="homePageVerticalButtonBottom">
<div class="verticalNavigationText"><a style="display:block" href="bottom.html">bottom link</a></div>
</div>
</div>
</div> <!-- end container_12 -->
Here's the relevant CSS:
.homePageVerticalButtonTop {
/* Why is the background not showing up? */
background: url(../images/homePageTopButton_normal.png) no-repeat left top;
width: 24.125em;
height: 4.125em;
background-size: 100%;
display: block;
}
.homePageVerticalButtonTop:hover {
/* This works fine */
background: url(../images/homePageTopButton_mouseOver.png) no-repeat left top;
width: 24.125em;
height: 4.125em;
background-size: 100%;
}
.homePageVerticalButtonTop:active {
/* So does this */
background: url(../images/homePageTopButton_mouseDown.png) no-repeat left top;
width: 24.125em;
height: 4.125em;
background-size: 100%;
}
.homePageVerticalButtonMiddle {
/* And so does the rest of these even though homePageVerticalButtonMiddle and homePageVerticalButtonTop are analogous cases and both PNGs are there. */
background: url(../images/homePageMiddleButton_normal.png) no-repeat left top;
width: 24.125em;
height: 4.125em;
background-size: 100%;
}
.homePageVerticalButtonMiddle:hover {
background: url(../images/homePageMiddleButton_mouseOver.png) no-repeat left top;
width: 24.125em;
height: 4.125em;
background-size: 100%;
}
.homePageVerticalButtonMiddle:active {
background: url(../images/homePageMiddleButton_mouseOver.png) no-repeat left top;
width: 24.125em;
height: 4.125em;
background-size: 100%;
}
/* Bottom omitted for brevity, but it's analogous to Top and only works on the hover and active states too. */
.verticalNavigationText {
color: #FFFFFF;
font-family: inherit;
font-size: 1.75em;
padding: 0.59375em 0 0.59375em 0.625em;
}
Edit: Please keep answers on topic, addressing why these images would be missing.
Dreamweaver should never be trusted for previews and its own behaviour is irrelevant because everyone else will be using a browser. That being said, your design patterns need a bit of attention.
<div class="homePageVerticalButtonTop">
<div class="verticalNavigationText"><a style="display:block" href="top.html">top link</a></div>
</div>
Can be more clearly expressed as:
<div class="homePageVerticalButtonTop">
top link
</div>
The CSS you'd apply to the link can then be expressed as:
.homePageVerticalButtonTop a {
display:block
}
...and other other styling for your link should be put in there, such as the styles applied to the redundant "verticalNavigationText" div. Avoid inline CSS.
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"
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
I have a DIV ...
<div id="content">
</div>
Now...In the design and if you think of it as a rectangle has the top as a header and also the footer is different so I cannot just create a 1px background image and repeat it.
I would have to do something like:
<div id="content">
<div id="header">This will have a fixed bg image</div>
<div id="body-content">This will have a repeated bg image and it's the part that can grow.</div>
<div id="footer-content">THis will content a fixed bg image for the footer</div>
</div>
Can anyone advise on the best way to handle this kind of design CSS wise please?
#header
{
background-image: url('header.png');
background-repeat: no-repeat;
}
#body
{
background-image: url('body.png');
background-repeat: repeat-y;
}
#footer
{
background-image: url('footer.png');
background-repeat: no-repeat;
}