Have the following html code:
<div id="container">
<div id="container2">
...
</div>
</div>
and the following css:
#container {
background: #323232 url(../images/container-bg.png) repeat-y;
position: relative;
min-height: 75%;
}
#container2 {
background: url(../images/container-bg-right.png) repeat-y right top;
}
but the image in #container2 is not repeating itself vertically after I added 'min-height: 75%' to #container.
Any advise is appreciated!
So I figured it out, here is what I did:
#container {
background: #323232 url(../images/container-bg.png) repeat-y;
position: relative;
height: 75%;
}
#container2 {
background: url(../images/container-bg-right.png) repeat-y right top;
min-height: 100%;
}
Thanks!
I believe that your container2 background is not repeating because it has no height. So if you want it to repeat as much as container one just give it the same min-height as container1.
Related
The transparent line I am looking to achieve is this:
The most closest I have got to it is this using gradient:
The css for gradient is:
.login {
background: linear-gradient(transparent 20%, #aaaaaa, transparent 77%), url("bg-image.jpg");
}
I am only interested in getting the same transparent line.
What should I do?
You can use linear-gradient as follow:
.box {
width:400px;
height:200px;
background:
linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)) 0 50%/100% 50px no-repeat,
url(https://lorempixel.com/400/200/);
}
<div class="box">
</div>
Here is example of one possible solution:
.wrap{
height:350px;
width:100%;
background: linear-gradient(red, yellow);
display:flex;
flex-flow:column;
justify-content:center
}
div div{
background-color:rgba(256,256,256,0.35);
height:100px;
width:100%;
}
<div class="wrap">
<div>
</div>
</div>
I believe you are looking for something like this. This uses flexbox to align the white 'line' vertically in the center of the image. The transparent background of the white line is done by simply using rgba color.
The advantage of this method is, that the height of the white line will scale with it's content.
.background-image {
background: url('https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=85740266a52ea733187e9775fdf8d2d5&auto=format&fit=crop&w=1567&q=80') no-repeat center center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.background-image__white-line {
background:rgba(255,255,255,0.5);
}
.background-image__white-line__content {
margin: auto;
max-width: 400px;
padding: 40px;
}
<div class="background-image">
<div class="background-image__white-line">
<div class="background-image__white-line__content">
Whatever you want
</div>
</div>
</div>
Edit
Simplified the css code, thanks to Termani Afif!
my code in css is:
.logo{
content:url(http://www.dylionsrugby.com.au/wp-content/uploads/2012/04/lion.png/600x600);
background-color: White;
float: right;
}
and in html I have:
<div class="logo"></div>
Am I missing something, nothing appears?`
Your question is somewhat general. You could also simulate the right positioning using positioning property on the image and not on the div.
.logo{
width: 250px;
height: 75px;
background-image: url("http://www.slate.com/content/dam/slate/articles/health_and_science/science/2015/07/150730_SCI_Cecil_lion.jpg.CROP.promo-xlarge2.jpg");
background-color: white;
background-repeat: no-repeat;
background-size: 100% 100%;
float: right;
}
<div class="logo"></div>
First of all, the "content" property is used for :before and :after pseudo-elements. Second, the link to the image is incorrect. I assume that you want the picture inside the div .logo with a white background so here is a jsfiddle: https://jsfiddle.net/Iulius90/njne5sy5/
code:
.logo {
background: white url(http://www.dylionsrugby.com.au/wp-content/uploads/2012/04/lion.png) no-repeat center;
background-size: cover;
float: right;
width: 200px;
height: 200px;
}
I saw quite a few similar questions but could not find a fix.
Open this sample and resize the browser to make its height shorter
than the main div height, ~400 pixels.
When scrolling down, the background image attached to the body is cut off:
The code:
html { height: 100%; color: white; }
body { height:100%; padding: 0; margin: 0; background:url(bg.jpg) repeat-x; background-position: bottom; background-size: contain; }
/*#pageWrap { background:url(bg.jpg) repeat-x;}*/
#page { height:100%; }
#divHeader { width:100%; height:115px; }
#divMain { width:600px; height:400px; border: solid 1px brown; }
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="pageWrap">
<div id="page">
<div id="divHeader">Header</div>
<div id="divMain">Main</div>
<div id="divFooter"><p>All Rights Reserved. Blabla® 2015</p></div>
</div>
</div>
</body>
</html>
I tried to move the background image to the pageWrap div as someone suggested.
It solves the vertical scroll problem, but creates a similar problem horizontally:
when the window is too narrow and you scroll left, the image is cut off on the right.
Any real solution?
You've got repeat-x value defined, then the background only repeats in the X axis (horizontally).
To solve this you've got two different solutions for two different purposes.
You can put repeat value to repeat in X and Y axis, but this have a problem because your background is a gradient, and if you repeat it in Y axis the visual effect will be bad.
The other solution (in my opinion the best solution) is to define that background covers the whole element. This can be achieved with the property background-size: cover.
The change will be that:
body {
background:url(bg.jpg) repeat-x;
background-size: cover;
}
Tell me if this solves your problem.
Exists another solution with the background-attachment property. It can be defined as fixed value and the scroll doesn't move the background.
body {
background:url(bg.jpg) repeat-x;
background-attachment: fixed;
}
Try these background styles:
background: url(bg.jpg);
background-position: 100% 100%;
background-size: cover;
Since repeating a gradient doesn't look that good, I guess you just want that background alwas cover your whole viewport and not scroll with it? That would be done with no-repeat and cover, like this:
body {
height:100%;
padding: 0;
margin: 0;
background:url(bg.jpg) no-repeat fixed;
background-position: bottom;
background-size: cover;
}
Use background-attachment: fixed on the body, like so:
html {
height: 100%;
color: white;
}
body {
height: 100%;
padding: 0;
margin: 0;
background: url(https://glaring-inferno-4496.firebaseapp.com/bg.jpg) repeat-x;
background-position: bottom;
background-size: contain;
}
/*#pageWrap { background:url(bg.jpg) repeat-x;}*/
#page {
height: 100%;
}
#divHeader {
width: 100%;
height: 115px;
}
#divMain {
width: 600px;
height: 400px;
border: solid 1px brown;
}
/*new code from here:*/
body {
background-attachment: fixed;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="pageWrap">
<div id="page">
<div id="divHeader">Header</div>
<div id="divMain">Main</div>
<div id="divFooter">
<p>All Rights Reserved. Blabla® 2015</p>
</div>
</div>
</div>
</body>
</html>
You can use un a CSS property called overflow-y:auto and asign to the father component, of this way is puts a scroll bar when the viewport height reduce him size and your background image don´t cuts anymore.
Try something like this:
.father {
height: 100vh;
background-image: url(https://static.vecteezy.com/system/resources/previews/001/331/268/original/happy-halloween-from-the-spooky-castle-free-vector.jpg);
background-size: 100% 100vh;
background-position: center;
background-repeat: repeat;
overflow-y: auto;
}
.child {
height: 1500px;
}
<div class="father">
<div class="child">
<h1 style="color: white">¡Hello World!</h1>
</div>
</div>
I am trying to give a div class the background image of a header but it won't show up.
Please see:
http://jsfiddle.net/eqzro6s3/
[css]
.header
{
background-image: url('http://wpsites.net/wp-content/uploads/2013/12/Custom-Header-Image.png') no-repeat;
width: 100%;
}
[html]
<div class="header">
</div>
What am i doing wrong? Thanks in advance.
Elements with backgrounds need to have dimensions. They don't automatically size themselves to the background image.
.header
{
background-image: url('http://wpsites.net/wp-content/uploads/2013/12/Custom-Header-Image.png') no-repeat;
width: 100%;
height: ?????
}
background-image is just not a short-hand property, thus you cannot use more than one value:
.header
{
background-image: url('path.png');/* remove no-repeat from here*/
background-repeat: no-repeat; /*use no-repeat here*/
width: 100%;
}
Or, use it like this:
.header
{
/*short-hand method can have multiple values*/
background: url('path.png') no-repeat;
width: 100%;
}
Try this:
.header
{
background: #FFFFFF url('http://wpsites.net/wp-content/uploads/2013/12/Custom-Header-Image.png') left center no-repeat;
width:100%;
height:431px;
}
http://jsfiddle.net/csdtesting/eqzro6s3/1/
Js Fiddle
.header{
background: url('http://wpsites.net/wp-content/uploads/2013/12/Custom-Header-Image.png') no-repeat;
width: 100%;
height:432px;
}
change background-image: to background:
This is my code: http://jsfiddle.net/spadez/LQKfk/2/
HTML:
<div id="main">
<div id="header" class="fullheight">
<div id="nav">Test</div>
Nav
</div>
<div id="content">
Hello
</div>
</div>
CSS:
*{padding: 0px; margin: 0px;}
#main{
background-color: #3B2F63;
background-image: -webkit-radial-gradient(50% top, rgba(84,90,182,0.6) 0%, rgba(84,90,182,0) 75%),-webkit-radial-gradient(right top, #794aa2 0%, rgba(121,74,162,0) 57%);
background-repeat: no-repeat;
background-size: 100% 1000px;
color: #c7c0de;
margin: 0;
padding: 0;
}
#header { }
#content{background-color: white;}
.fullheight{
display: block;
position: relative;
height: 100%;
}
With this code, why isn't the gradient area extending the full height of the window?
You need to give the gradient area a height of 100%, which in turn needs to be relative to the viewport which can be established by setting the same for the html and body elements.
Demo Fiddle
Add:
html,body, #main{
height:100%;
}
html,body, #id_of_div_you_want_to_make_full_heightwidth_of_window{
height:100%;
width:100%;
}
The full height is basically related to document first. You need to make document full height of window at least to have your divs in document get full height of window.
Achieving this might be tricky in case of your document is probably containing more content than is fitting in current size of window, though.
Take the fiddle of SW4 and change
height: 100%;
on html, body to
min-height: 100%;
See this derived fiddle: http://jsfiddle.net/SGjcc/1/
html,body, #main
{
height:100%;
}
You can try below code:
Demo
#main{
background-color: #3B2F63;
background-image: -webkit-radial-gradient(50% top, rgba(84,90,182,0.6) 0%, rgba(84,90,182,0) 75%),-webkit-radial-gradient(right top, #794aa2 0%, rgba(121,74,162,0) 57%);
background-repeat: no-repeat;
background-size: 100% 1000px;
color: #c7c0de;
margin: 0;
padding: 0;
height:100%;
}