I'm building a vertical layout with many slides, each one has 100% height to fit on different resolutions. I'm using zurb-foundation 5 front end, and in the top part of the site I'd like to create a background slideshow with orbit; to acheive that, I organized the markup so that each one of the 'li's which form the orbit slider has 100% height and a personal background image. Evreything is working ok, the only issue is that, once the page is loaded, when I increase the height of the browser, my background doesnt become bigger.
That's the HTML markup:
<section id="top">
<ul class="top-slider" data-orbit>
<li class="slide1">
<li class="slide2">
</ul>
</section>
And the CSS one:
html, body, #top, #test {
width:100%;
height:100%;
margin:0;
}
.orbit-container, .orbit-container ul {
height:100%;
}
.slide {
height:100%;
background-repeat: no-repeat;
background-position:center;
background-size: cover;
}
.slide1 {
#extend .slide;
background-image: url('../images/slider_1.jpg');
}
.slide2 {
#extend .slide;
background-image: url('../images/slider_2.jpg');
}
Try to use "max-width" instead of "width".
Thank you for the answer, unfortunatly it doesn't work. Anyway, I solved adding !important to
.orbit-container, .orbit-container ul {
height:100% !important;
}
:D
Related
i am working on this website (builted with Wordpress) and i am trying to set this image as a fixed left background above the entire website content.
Via CSS i'm trying this
body {
background-image: url("http://birsmatt.ch/de/wp-content/uploads/2016/04/bg_left.png");
background-position: left;
background-repeat: no-repeat;
z-index: 1;
}
...but the z-index does not works.
Any tip?
Thanks in advice.
Inside the body is your whole website content. So if you set a background, it will be behind all the content of the body.
You can create a new element inside the body with the size of the body and give that the background you want.
Example:
#background {
background-image:url('http://birsmatt.ch/de/wp-content/uploads/2016/04/bg_left.png');
background-position:left;
background-repeat:no-repeat;
height:100%;
width:100%;
z-index:1;
position:absolute; /* make it overlap your website content */
}
<body>
<div id='background'></div>
<div id='rest of your content'>
...
</div>
</body>
My background image isn't scrolling up and down, or else it is scrolling down too far. I want it to scroll down to the bottom of the background image and then stop.
<head>
<style type='text/css'>
.noWhiteSpace {
margin-left:0;
margin-right:0;
margin-top:0;
background-color:#F4F7E3;
background-image:url('/front_page.jpg');
background-repeat:no-repeat;
background-size:100%;
height:180%;
}
.words {
font-family:Madelinette;
text-align:center;
margin-left:25%;
margin-top:10%;
}
#lineOne {
color:#5f4e2b;
font-size:5em;
}
#lineTwo {
color:#629040;
font-size:4em;
padding-bottom:2%;
}
#otherLines {
color:#952221;
font-size:2em;
}
</style>
</head>
<body class='noWhiteSpace'>
<div class='words'>
<div id='lineOne'>Crafters Resale</div>
<div id='lineTwo'>blah</div>
<div id='otherLines'>blah<br>blah<br>blah<br>blah<br>blah</div>
</div>
</body>
background-attachment: scroll is by default you don't need to specify that. Your image is not scrolling because your body don't have enough height try giving height explicitly in css or just add some more content in your body.
Hope this will help you but if you were asking something different please elaborate it.
height of 100% means your whole content will be displayed but dude background-image don't get count in the content(if you add img tag then it will be counted). So you need to give the height same as that of your img in px. For eg.
.noWhiteSpace {
height: 2222px; /* I think that was your background-img height */
/* your other styling .... */
}
I have this lines below for a reponsive site,
I need to put "no-image" class when there is no image,
<div class="row">
<div class="column">
<img id="first" width=275 height=385 src="flower-275x385.jpg" />
<img id="second" width=275 height=385 class="no-image" src="blank-1x1.png" />
</div>
</div>
<style>
.row {
width:400px ;
}
.column {
width:50% ;
}
.column img {
width:100% ;
height:auto ;
}
.column img.no-image {
background:red url(image-pending.jpg) no-repeat center ;
}
</style>
The problem is Blank image always shown as square;
Because of natural sizes of blank.png is 1x1.
It seems "height:auto" reset or ignore HTML defined sizes (275x385),
Here is a jsfiddle for examine,
How to fit it like first image without JS?
Edit: I think This can be solved only with JS manipulations: My solution, Thank you for advices below!
You can consider doing this in CSS. Have a no-image like this:
http://www.mnit.ac.in/new/PortalProfile/images/faculty/noimage.jpg
Now for all the images, give this CSS:
img {background: url("no-image.png") no-repeat center center transparent;}
So, this way, the images to be loaded will show No Image and then those with no image, show this. :) DeviantArt uses the same technique. Do check this out.
You can try:
.column img.no-image {
background:red url(image-pending.jpg) no-repeat center ";
height:385px;
}
If i'm not misunderstanding your question, i think you can try using css property background-size .
<style>
.column img.no-image {
background:red url(image-pending.jpg) no-repeat center;
background-size:275px 385px;
}
</style>
<img id="second" class="no-image" src="blank-1x1.png" />
if you still have to write the inline style css of width&height inside the at html, doesn't it supposed to add the 'px' after the number of size you write?
for some more useful documentation, you can surf into http://www.w3schools.com :)
But I am struggling.
Code I have for css is:
#gallery img {
width:700px;
height:213px;
margin:0;
padding:0;
}
So I thought ...
#gallery img:hover {
width:700px;
height:213px;
position: relative;
z-index:10000;
background: transparent url(../images/imgOverlay-Zoom.png) no-repeat center center;
}
Would work, but it doesnt.
The image I am transparently overlaying on hover is:
What am I doing wrong.
I think I may have a corrupt css tag somewhere.
Any help appreciated.
Make the #gallery have a background image rather than having an image tag inside it... otherwise it'll be on top of the background. Then have another div inside it which has the :hover pseudo-class. If it still doesn't work, take out the word transparent.
Or you could not overlay the image and just swap the original image for the combined image?
Hello there
I think you misunderstood the mechanics of CSS:
The image itself is an object and the background specified goes behind it.
So you have to make the non transparent image the background and specify the transparent one in the src. However this won't suit your needs.
A workaround would with CSS would be troublesome, so i would suggest to swap the whole image with a css hover or javascript onMouseover or jQuery - get familliar with those since it's the proper way.
Fixed.
css:
#container { position:relative; width:700px; height:213px;}
.image { position:absolute; width:700px; height:213px; z-index:0;}
.overlay { background-image:none); position:absolute; width:700px; height:213px; z-index:1;}
.overlay:hover { background: transparent url(images/imgOverlay-Zoom.png)no-repeat center center;}
html:
<div class="overlay" ></div>
<div class="image" ><img src="images/listing-page-with-gradient.png" /></div>
Im not too great at CSS but hopefully someone on here can help. I have the following mockup. (i have stripped out my content to make it easy to view)
<body>
<div id="container">
<div id="header"></div>
<div id="body">
<div id="navBar"></div>
<div id="mainContent"></div>
</div>
<div id="footer"></div>
</div>
</body>
my CSS is as follows:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
now im unsure as to how to get the "navBar" to be the page height. I've tried adding height: 100% but that doesnt work.
Thanks,
Matt
Giving an element height: 100% will give it a height equal to that of its containing element, which in your case is #body. Since body in your example is only as big as it needs to be to hold its content, #navBar will be 100% of that height.
To fix this, you can make #container and #body height:100% to make them as tall as tho body tag, which takes up the whole page:
#container {
height:100%
}
#body{
height:100%;
}
In the interest of completeness, you could also set the top and bottom of #navBar:
position: absolute;
top: 20px;
bottom: 60px; /* height of footer */
To understand the difference, play around with This JS Fiddle. Mess around with the height and top, bottom, position properties to see how your changes affect the layout; just don't use both positioning methods at once!
Your issue appears to be that each parent DIV all the way up to the BODY tag must explicitely have a height of 100% for #navBar to have 100% height. This means you would also have to set the height of #body to 100% as well, since it is the parent container of #navBar.
Have a look at this site - I assume you want a two column layout - this site will show you how to do what you want. Hope it helps.