This is my website coding and I am already running into problems, please help!
This is my CSS style sheet:
.center {
position: absolute;
left: 50%;
}
body
{
background-color: #45a8e1;
background-image:url('images/background.png');
background-repeat:repeat-x;
}
And then here is the HTML:
<body>
<div id="header" class="center">
<img src="images/header.png">
</div>
</body>
The final results are coming okay but the page is extremely wide. I am trying to fit my background image in the view-port (page). Also, I want to center my div in the center which doesn't seem to be working since the page is so wide.
Use this css:
.center {
display:inline-block;
margin: 0 auto;
}
body
{
width: 100%;
text-align: center;
background-color: #45a8e1;
background:url('images/background.png');
-webkit-background-size: auto 100%;
-moz-background-size: auto 100%;
-o-background-size: auto 100%;
background-size: auto 100%;
background-repeat:repeat-x;
}
Note: background-size is not supported in IE8 and below.
Try this -jsFiddle
#header {
background: url('/*yourImageHere*/') repeat-x center;
height:200px;
width:100%;
}
Related
I am trying to create a simple responsive splash page with a background image and a div on top.
I have managed to get the responsive background image. This works well.
Now I am having issue placing a div on top of this background and making sure it follows the resizing properly.
I have set percentage margins for this div but it's not keeping the percentages, also if I make the window too small then the div disappears completely.
How can I fix this problem?
Thanks a lot for your help.
Guillaume
The address:
http://b-tees.net/testsplash/
My html:
<div id="bg">
<img src="http://b-tees.net/wp-content/uploads/2014/08/london.jpg" alt="">
</div>
<div id="selector">
<?php do_action('icl_language_selector'); ?>
</div>
My CSS:
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
#selector {
position:absolute;
margin-top:10%;
margin-left:10%;
}
My suggestion is to use like this : Demo
instead of the method you are using atpresent
CSS:
html, body {
min-height: 100%;
height: 100%;
padding:0;
margin:0;
}
.bg_img {
background:url("http://b-tees.net/wp-content/uploads/2014/08/london.jpg") no-repeat center top fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height:100%;
}
#selector {
display:block;
vertical-align:middle;
text-align:center;
margin:0 auto;
width:50%;
}
HTML:
<div class="bg_img">
<div id="selector">Test test test..
</div>
</div>
I have a fixed header that i want to keep behind the container div as I scroll down the page. as seen on http://www.madebydaryl.co.uk/. It's sorta working except the background of the content div seems to be hidden behind the background of the header. Not sure how to solve this..
My css:
header{
position: fixed;
background: url(images/mainbg_blur.png) no-repeat center;
background-size: cover;
height: 100vh;
display: table;
width: 100%;
z-index: 1;
top:0;
left:0;
}
.container {
position: relative;
margin-top:100vh;
background: #fff;
z-index: 2;
}
EDIT:
This kinda worked:
header{
position: fixed;
background: url(images/mainbg_blur.png) no-repeat center;
background-size: cover;
height: 100vh;
min-height: 100%;
width: 100%;
display: table;
top:0;
left:0;
}
.container {
position: relative;
width: 100%;
height: 100%;
min-height: 100%;
margin-top:100vh;
background: #fff;
}
Except the background of the container div doesnt stretch to cover all of the content, just the height of the viewport. Any ideas?
The effect that you are talking about is known as Parallax Sliding effect,
Check it here
http://stephband.info/jparallax/
or
http://webdesign.tutsplus.com/tutorials/create-a-parallax-scrolling-website-using-stellar-js--webdesign-7307
Alas, such a simple solution.
Just put another div inside the container div, and give it the background color.
so:
<header>content</header>
<div class="container>
<div class="bg">
Main content
</div>
</div>
and the same css except move the background to the .bg.
I am trying out responsive layout with 100% div wrapper and then placing a background image with text above and below it.
Unable to get it to display.
Looking to get the image to resize with browser window.
What am I doing wrong?
.wrapper {
width: 100%;
}
.image {
background: url("http://upload.wikimedia.org/wikipedia/commons/3/35/Rivi%C3%A8re_Coulonge_Pont_Davidson_1024x768.JPG") no-repeat center;
background-size: cover;
}
.text {
text-align: center;
font-size: 50px;
color: yellow;
}
http://jsfiddle.net/f5F6T/
Looks like you need to give height and width to your .image element. As well as a height to your wrapping div.
u need to set the content in middle div or give height. because initial div does nt have any height so how can u see the background??
check the fiddle-
--HTML--
<div class="wrapper">
<div class="text">Give the height to below div!</div>
<div class="image"></div>
<div class="text">So, here u have ur photo</div>
</div>
--CSS--
.image {
background: url("http://upload.wikimedia.org/wikipedia/commons/3/35/Rivi%C3%A8re_Coulonge_Pont_Davidson_1024x768.JPG") no-repeat center;
background-size: cover;
height:100px;
}
You're .image is actually 0px heigh, that's why the image is not displayed.
Check out this :
just moved the .image code into the .text code :
.text {
background: url("http://upload.wikimedia.org/wikipedia/commons/3/35/Rivi%C3%A8re_Coulonge_Pont_Davidson_1024x768.JPG") no-repeat center;
background-size: cover;
text-align: center;
font-size: 50px;
color: yellow;
}
http://jsfiddle.net/f5F6T/1/
Edit :
.image {
height: 30px;
background: url("http://upload.wikimedia.org/wikipedia/commons/3/35/Rivi%C3%A8re_Coulonge_Pont_Davidson_1024x768.JPG") no-repeat center;
background-size: cover;
}
http://jsfiddle.net/f5F6T/3/
I need to put HTML content within a page template. The section I have been given is within a Div container defining the size I have to work with. The CSS for the template defines margins of 17.5% left and right meaning I have 65% in the centre to input my content. This is ok for a majority of the content I need to include except the background image that needs to be full width (100%). I can attach a style sheet with my content however if I change the .wrapper element in my css it causes issues with the rest of the page. I also have to change the background image on a page by page basis so have to include the image path in the HTML and not in the CSS.
What I have so far is
HTML:
<div class="pageBackground">
<img src="img/festival-background.jpg">
</div>
CSS:
.pageBackground {
position: relative;
}
.pageBackground img {
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;
}
What would be a correct way to make my background image 100% of the page rather then container and behind the rest of my content?
Many thanks in advance!!!
This is entirely possible using the same techniques as detailed in this Q/A.
Essentially, using no additional HTML, we use an absolutely positioned pseudo-element as the background to the required section/div.
.extra {
position: relative;
}
.extra::after {
content: '';
position: absolute;
top:0;
width: 100vw;
height: 100%;
left:50%;
transform:translateX(-50%);
background-image: url(http://lorempixel.com/output/abstract-q-c-1000-250-5.jpg);
background-size: cover ;
background-repeat: no-repeat;
}
* {
margin: 0;
padding: 0;
}
.container {
width: 65%;
margin: auto;
border: 1px solid green;
}
section {
min-height: 100px;
border: 1px solid lightgrey;
}
.extra {
position: relative;
}
.extra::after {
content: '';
position: absolute;
top: 0;
width: 100vw;
height: 100%;
left: 50%;
transform: translateX(-50%);
background-image: url(http://lorempixel.com/image_output/abstract-q-c-100-100-1.jpg);
background-size: cover;
background-repeat: no-repeat;
}
<div class="container">
<section></section>
<section class="extra"></section>
<section></section>
</div>
Don't know if you have that kind of permission, but you could put img outside that div, and set them both on position absolute.
<img src="asdf>
<div class="wrapper">
CSS:
.wrapper {
position: absolute;
text-align: center;
width: 65%;
background-color: transparent;
height: 300px;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -32.5%;
}
img {
position: absolute;
top: 50%;
width: 100%;
height: 50px;
background-color: gray;
}
jsFiddle
In your CSS, add the background image to the body property and then put the rest of your site in an entire container div, within which all other properties will reside.
HTML:
<body>
<div class="entireSite">
Site content goes here.
</div>
</body>
CSS:
.body {
background-image:url("img/festival-background.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;
}
.entireSite {
position: absolute;
z-index: -1;
}
I basically made 960 layout with 3 divs to easily place child divs with images and text. For some reason I can't make the first background-image to display.
What am I doing wrong?
Website concept:
HTML
<div class="wrap">
<div id="left">1
<div id="logo"></div>
</div>
<div id="middle">2</div>
<div id="right">3</div>
</div>
CSS
html, body { background-image:url(../bg.png);
margin: 0;
padding: 0;
border: 0
}
.wrap {
background: #e7e7e7;
text-align: center;
width: 840px;
margin:auto;
padding-left:60px;
padding-right:60px;
}
#left, #middle, #right {
background: #ccc;
display: inline-block;
margin-right: -4px;
width:280px;
}
#logo {
display: block;
position: relative;
background-image:url(../logo.png));
width:40px;
height:40px;
}
background-image:url(../logo.png));
Should be...
background-image: url(../logo.png);
You may also want to use background-repeat: no-repeat; background-position: center center; and background-size: cover; to make proper use of the background of a div.
It looks like you have an extra parenthetic for background-image under #logo in the CSS file. Change it to background-image: url(../logo.png);