I have a query based on the following CSS and HTML code (see below).
I have a background image that spans the whole browser page (left to right), which is not what I'm after.
How can I get the background image to stay within the boundaries of my main content canvas, i.e. centered 850x600px and anything outside just be white?
body {
background-color: #ffffff;
margin:0px;
padding:0px;
background-image: url(images/background.jpg);
background-repeat: repeat-x;
background-attachment: scroll;
}
#main {
width:850px;
margin: 0px auto 0px auto;
border: 0px solid #f0f0f0;
}
<body>
<div id="main">
<img src="images/female_model.jpg" id="female_model" alt="" />
<div id="colwrap1">
<img src="images/nav_bar.jpg" id="nav_bar" alt="" />
<img src="images/site_name.jpg" id="site_name" alt="" />
</div>
</div>
</body>
If you want to attach the background to the main DIV, then specify the background there. It sounds like you want the background to be centered horizontally (background-position: 50%;) but repeat for the vertical extent of the main DIV (background-repeat: repeat-y;).
body {
background-color: white;
margin: 0px;
padding: 0px;
}
#main {
background-image: url(images/background.jpg);
background-repeat: repeat-y;
background-position: 50%;
// rest as before ...
width: 850px;
...
}
<div id="main">
Lorem ipsum dolor sit amet, ...
If your background image does not appear it could be because the image is inaccessible or the main DIV has no height--that could happen if female_model and colwrap1 both float.
How about you just put the background image on your #main?
Dominic is correct. Move the background properties from body to the main div and you should have what you need.
If I have understood your question correctly, you want to set the page background to white and have the background of your main div be whatever image you set it to - correct?
If so, setting body to:
body
{
background:#fff;
}
should do the trick.
Now, I also noticed that the image you want to use has a smaller width than your div.
So you will want main to have the following properties:
#main
{
background-image:url(myimage.jpg);
background-position:top;
background-repeat:repeat-x; <!-- you need this as your image is < than the div width -->
}
That should do the trick. If it still doesnt work, perhaps you want to share the page link on your server. Its possible that we have misunderstood your question.
Related
I am hoping one of you can help. I have a problem that with googling and checking the forums I have not been able to solve.
I would like to create a landing page that has a tall bg image that extends to 100% width and adjusts to the browser window + the dynamic height of the content. All the content should be below the boundary of the browser window so its just the image that can be seen when the browser first loads up and you scroll down to the content which sits over the bottom part of the extended image.
My HTML currently is:
<body>
<section id="sectionOne">
<div id="sectionOneLanding"></div>
<div id="sectionOneContent">CONTENT TO SIT HERE</div>
</section>
</body>
And my CSS is currently:
html,
body {
height:100%;
width:100%;
}
#sectionOne {
height:100%;
background-image: url(../images/cliff.jpg);
background-size: cover;
}
#sectionOneLanding {
height:100%;
width:100%;
}
At the moment, the image crops to 100% browser height and when you scroll down the additional content sits over a white bg instead of the remainder of the image. I believe this is due to the #sectionOne height being 100% but when I set it to higher than 100% it pushes my content further down but still on a white bg. Changing Background-Size to 100% also didn't work. It reacted the same as using cover.
Any ideas? Is there a handy CSS trick?
Apologies if this doesn't make clear sense. Ask any questions you need to as its hard to describe.
You need to use positioning for this case.
html, body {
height: 100%;
margin: 0;
}
#sectionOne {
position: relative;
height: 100%;
background-image: url(../images/cliff.jpg);
background-size: cover;
background-color: #99f;
}
#sectionOneLanding {
height:100%;
width:100%;
}
<section id="sectionOne">
<div id="sectionOneLanding"></div>
<div id="sectionOneContent">CONTENT TO SIT HERE</div>
</section>
You don't need width: 100%. But you need margin: 0; as there are default margins. I have added a background colour so that you can clearly see the background spanning fully leaving the content in the next page.
If you need both the image and the content to be in the same page, the you need to use Flex Box.
FlexBox Example
body, html {
height: 100%;
margin: 0;
}
#sectionOne {
display: flex;
flex-direction: column;
height: 100%;
}
#sectionOneLanding {
background-color: #99f;
flex: 1;
}
<section id="sectionOne">
<div id="sectionOneLanding"></div>
<div id="sectionOneContent">CONTENT TO SIT HERE</div>
</section>
Preview
New at Bootstrap. I'm having a problem setting my background image to follow the header image.
The header section has it's own full-screen background, which I then want to be followed by a tiled background image.
I tried:
<div class="header">...</div>
<div class="main-body">
<div class="container">...</div>
<div class="container">...</div>
...
</div>
<div class="footer">...</div>
with the following stylesheet:
.main-body {
text-align: center;
background: url(../img/setttings-bg-black.jpg) no-repeat center center;
background-size: 1024;
background-color: #000000;
}
.header {
text-align: center;
color: #000000;
background: url(../img/promo-bg.jpg) no-repeat center center;
background-size: cover;
}
The problem is that the main-body background's top is hidden by the bottom part of the header body.
What am I doing wrong?
Verify this link or link
have a solution for you.
problem 1)
What I did is I added a <img> below the first div (so the div with the class intro). The img has a clas of bg.
Than add this css:
.bg{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
here you have a working fiddle. I added a lot of <br> tags to show you it works.
You can also try to set the background image height:100% and width:auto;. If you do this the image won't be so crammed together on some screens.
problem 2)
I Gave every slide a class slide1. I also added to all the slide classes position:relative;. Taka a look at this fiddle.
i hope your question is now anwsered. If you have other problems, feel free to ask.
I'm working on a responsive website and I'm having an annoying problem. In my header is some text. And I set it offscreen with text-indent -9999px. After that I load a background image. But I want only the background image to be clickable. I don't know how to do this. I've found a few examples on google. But they never "inject" a picture with css. They always define the picture in the html.
So all that I want is a picture horizontally centered in the header and only the picture is clickable, not the margin around it.
<header>
<a href="alink">
<h1>this is gonna be replaced with an image(on desktop websites). It will stay here on mobile website</h1></a>
</header>
and the css:
header h1 {
margin:10px 0 30px 0;
text-indent:-9999px;
background-image: url('pika.png');
background-repeat: no-repeat;
background-size: contain;
background-position:50% 50%;
width:100%;
height:220px;
border:1px solid red;
float: left;
}
I've also uploaded the code to jsfiddle:
http://jsfiddle.net/Cm3yQ/
As you can see, currently the whole h1 is clickable, and I want only the picture to be clickable.
<edit>
Possibilities to have only image clikable are:
the use of img + map + area
or the use of SVG. one random tutorial : http://tutorials.jenkov.com/svg/a-element.html
Average example of what can be done : DEMO
</edit>
You should wrap link inside h1, and give it a display:block.
header {
background:url(http://lorempixel.com/400/150);
/* background could either be on h1 or a */
background-size:cover;/* optionnal */
}
header, h1 , h1 a {/* size them all at once */
display:block;
height:300px;
}
a {
text-indent:-9999px;/* hide text from screen */
/* still not working ? set background here or give it a color
almost transparent so it can catch click event :
background:rgba(0,0,0,0.001);*/
}
and HTML :
<header>
<h1>
SOME text
</h1>
</header>
it may look like a comment but i dont have enough reputations to put comment ,hence am putting it as an answer.
Why dont you create another div in the html and put your image inside it ,then style it accordingly.
HTML
<header>
<div class="headerDiv">
<h1>this is gonna be replaced with an image(on desktop website). It will stay here on mobile website</h1>
</div>
</header>
Css
.headerDiv{
border:1px solid red;
height:220px;
width:100%;
}
header h1 {
margin:10px 0 30px 0;
text-indent:-9999px;
background-image: url('http://img3.wikia.nocookie.net/__cb20120630141813/sims/images/d/d7/Pichu.gif');
background-repeat: no-repeat;
background-size: contain;
background-position:center;
height:220px;
// float: left; Get Rid of float: left
}
Some pages contain page-header element/class.
.page-header class look like this:
.page-header {
background: url(/public/images/page-header.png) no-repeat;
width: 1000px;
height: 190px;
color: white;
font-size: 17px;
margin: 0;
}
For Example:
index.html
<div class="page-header">
<h1>Homepage</h1>
</div>
about.html
<div class="page-header">
<h1>About</h1>
</div>
I want to add small image on top of the page-header using css, each page will have different image. How to do this and should I use span with css ?
With CSS3, you can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color.
https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multiple_backgrounds
Yes you can add a SPAN and give the image,
NOTE: if you give any image to the header as a background, it will not useful to SEO, I suggest same image keep in IMG tag and out of the screen to get some SEO help too.
Ex:
.page-header {
background: url(/public/images/page-header.png) no-repeat;
width: 1000px;
height: 190px;
color: white;
font-size: 17px;
margin: 0;
position:relative;
}
.out-of-screen {
position:absolute;
top:-2000em;
}
<div class="page-header">
<h1>Homepage</h1>
<img src="/public/images/page-header.png" alt="alt text" class="out-of-screen">
</div>
If your looking for a secondary background image to be overlaid on the previous background image. Then try this. I haven't tried it myself but it may be the answer.
.page-header:after{
background-image:url('/public/images/page-header2.png' no repeat;
}
You may need to position the :after to where you want it on the page but it maybe easier to stick with the simple image tag as Sameera has suggested if you want the image to be in a certain location within the element.
position:fixed;
left:0;
top:30%;
width:200px;
height:auto
<div class="page-header">
<h1>Homepage</h1>
<img src="path/to/image.jpg" alt="" style="position:absolute; left:50px; top: 50px;" />
</div>
there is a css property calles z-index.
The higher the value the most 'front' it will be.
The lower the more Back t will be
Négative value are okay.
.front{
z-index: 999;
}
.back{
z-index: 0;
}
NOTE: different-browser seems to have different behaviour.
To answer your question, Give a z-index lower to your header and add an elemt (span would be good) with an higher z-index
Use Multiple Backgrounds with CSS3.
Add padding-top to .page-header position page-header.png to bottom and
place second background at top.
http://css-tricks.com/stacking-order-of-multiple-backgrounds/
http://www.css3.info/preview/multiple-backgrounds/
CSS allows us to add multiple backgrounds images just by adding a comma (,) between them.
HTML
<div class="bg-image">
CSS
.bg-image{
outline: 2px solid black;
padding:20em;
background-image:
url(https://images.unsplash.com/photo-1634148739677-a5bb54df2611?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=774&q=80),
url(add another ".svg img" or any type of image);
background-repeat: no-repeat, repeat;
background-position:right 20% center 0px, top left;
background-size:auto, 10px;}
I have a header image that repeats across screen, so that no matter the screen resolution the header is always stretched 100%, I have placed the image inside a wrapper div.
Over the top of that DIV I also wish to place the 'logo' such that it is always centred across the top of the screen.
I appreciate this could be done another way and have already tried just having the logo on top of the header in photoshop although i couldn't get the image centred as I would of wished.
Please find my code below:
HTML:
<div id="wrapperHeader">
<div id="header">
<img src="images/logo.png" width="1000" height="200" alt="logo" />
</div>
</div>
CSS:
#wrapperHeader{
position: relative;
background-image:url(images/header.png);
}
#header{
left: 50%;
margin-left: -500px;
background:url(images/logo.png) no-repeat;
width:1000px;
height:200px;
}
Also, I am aware of the properties of margin-left:auto; etc. Although I would be grateful if anyone could explain how to use them appropriately here.
Thanks!
I think this is what you need if I'm understanding you correctly:
<div id="wrapperHeader">
<div id="header">
<img src="images/logo.png" alt="logo" />
</div>
</div>
div#wrapperHeader {
width:100%;
height;200px; /* height of the background image? */
background:url(images/header.png) repeat-x 0 0;
text-align:center;
}
div#wrapperHeader div#header {
width:1000px;
height:200px;
margin:0 auto;
}
div#wrapperHeader div#header img {
width:; /* the width of the logo image */
height:; /* the height of the logo image */
margin:0 auto;
}
If you set the margin to be margin:0 auto the image will be centered.
This will give top + bottom a margin of 0, and left and right a margin of 'auto'. Since the div has a width (200px), the image will be 200px wide and the browser will auto set the left and right margin to half of what is left on the page, which will result in the image being centered.
you don't need to set the width of header in css, just put the background image as center using this code:
background: url("images/logo.png") no-repeat top center;
or you can just use img tag and put align="center" in the div