I have a problem adding the background-image: url() tag to my code. It doesn't display. I've tried everything, added strings, made it the first in the block but nothing works. Quite frustrating.
The HTML:
<div id="home" class="offset">
<div class="landing">
<div class="home-wrap">
<div class="home-inner"></div>
</div>
</div>
The CSS:
.home-inner {
background-image: url("imgs\04-full.jpg");
position: relative;
background-size: cover;
}
This is happening becouse the div with the background-image attribute has no sizes so it is displayed in the html page but it has width and heght null.
.home-inner {
background-image: url(https://www.gravatar.com/avatar/062021b6a1aae23a9651e9ab01ec9e36?s=48&d=identicon&r=PG&f=1);
position: relative;
background-size: cover;
width: 500px; /* fixed width */
height: 500px; /* fixed height */
}
<div id="home" class="offset">
<div class="landing">
<div class="home-wrap">
<div class="home-inner"></div>
</div>
</div>
Try adding some content to it or giving the div some width and height
Related
How to make image between two grid dives? That image would be 50% on one and 50% on another?
<div class="row">
<div class="col-lg-12">
</div>
</div>
<div class="sec-div">
<img class="img-fluid img-second "src="http://lorempixel.com/400/200/cats">
</div>
<div class="row">
<div class="col-lg-12 second">
</div>
</div>
I think you should use z-index to keep the img below - not sure if will be necessary, set the body { background-color: gray } and set the margin of the main div with a negative value. I think this will work.
Try this: (I'm assuming you're using Bootstrap)
HTML:
<div class="container-fluid" id="header"></div>
<div class="container second">
<div class="col-lg-12 ">
</div>
</div>
CSS:
#header {
padding: 2% 0% 5% 0%; /* you should control img height through here, as width will be viewport sized */
background: url('images/pool.jpg');
background-attachment: static;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index: 0 /* try using this to set this div below the other */
}
.second {
margin: /* negative value */
z-index: /* bootstrap items have really high numbers, so I guess this won't be necessary */
}
See it working here! https://jsfiddle.net/hokumi/m7qoy7h3/
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>
My code is here: JSFiddle (I am working with Bootstrap 3)
Basically, my problem is I can't get the images in the columns to keep their aspect ratio, probably because the column height is fixed.
If I remove:
img {
width: 100%;
height:100%;
}
the images simply get cropped...
The column size is fixed, because I want the entire body of the page to fit the window vertically and have no scroll bar, since I am working on a desktop application and the only solution I found is to define everything in Viewport units.
I'm not sure I'm even on the right track, trying to define everything in vh/vw? Maybe there is another way?
This is very roughly speaking (or drawing..) what I want to achieve in the end: Layout
Any input at all would be greatly appreciated.
Use divs instead if img-tags and give them the image src as a background url. You can then set background-size to contain of cover.
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
html, body{
height:100vh;
overflow:hidden;
}
.container-fluid {
height: 80vh;
width: 90vw;
overflow-y:hidden;
}
.col-lg-6 {
height: 32vh;
overflow:hidden;
}
.col-md-6 {
height: 32vh;
overflow:hidden;
}
.col-s-6 {
height: 32vh;
overflow:hidden;
}
img {
width: 100%;
height:100%;
}
#img-1 {
background: url(http://farm5.staticflickr.com/4149/5174348786_e4a8494137.jpg) center center no-repeat;
background-size: contain;
height: 100%;
}
#img-2 {
background: url(http://noliesradio.org/wp/wp-content/uploads/2014/02/introslide.JPG_.jpg) center center no-repeat;
background-size: cover;
height: 100%;
}
<div class="container-fluid">
<div class="row">
<div class="row">
<div class="col-lg-6 col-md-6 col-s-6">
<div id="img-1" src="http://farm5.staticflickr.com/4149/5174348786_e4a8494137.jpg">
</div>
</div>
<div class="col-lg-6 col-md-6 col-s-6">
<div id="img-2">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-s-6">
<img src="http://www-static.weddingbee.com/pics/52547/jacaranda.jpg">
</div>
<div class="col-lg-6 col-md-6">
<img src="http://www.paramountplants.co.uk/images/evergreen-screening/acer-palmatum-dissectum-garnet-specimen-tree.jpg">
</div>
</div>
</div>
I have a page in which I am using bootstrap for designing. Now I am using grids; I want to keep 8 columns for my image and 4 columns for the text. So i have following code:-
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="bg"></div>
</div>
<div class="col-md-4">
hi how are you
</div>
</div>
</div>
Following is the css for class bg :
.bg {
background-image: url('../images/2.jpg');
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:690px;
}
Now everything works fine, but I am facing a small problem here where i am checking this in extra small screen, the picture occupies almost the entire screen and for text i have to scroll way to the bottom.
Is there any way to adjust image height(width works perfectly fine) for extra small screens so that image and text can be seen together without much scrolling?
Try using viewport-height in CSS3:
.bg {
height:100vh;
}
do like this.give div class name as img-responsive and set width and height as your need.and put your image inside it and set its width and height like this.
<div class="img-responsive" style="width: 300px;height: 300px;">
<img style="width: 100%;height: 100%" src="http://www.intrawallpaper.com/static/images/1250654-for-laptop-nature.jpg"/>
</div>
if you want text over picture, you can do this:
#media (max-width: 480px) {
.bg {
position: absolute;
left: 0;
width: 100%;
}
}
if you want half top is picture, half bottom is text, you can do this:
html
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="wrap">
<div class="bg"></div>
</div>
</div>
<div class="col-md-4">
hi how are you
</div>
</div>
</div>
css
#media (max-width: 480px) {
.wrap {
position: relative;
padding-bottom: 50%;
}
.bg {
position: absolute;
left: 0;
width: 100%;
height: 100%;
}
}
hope it can help
I am using Twitter Bootstrap and have placed a number of fullscreen background images that were working perfectly. Tonight I added Scrollr to the site and now the background images are all blown up and I can't figure out why?
html
<header id="top" class="header">
<div class="container text-vertical-center">
<div class="row">
<div class="center-block">
<div class="padded" style="border: 1px solid white">
<h1 class="title text-uppercase"><font color="#FFFFFF">Language</font></h1>
</div>
</div>
</div>
<div class="row">
<div class="scroll">
<i class="icon-double-angle-down icon-large"></i>
</div>
</div>
</div>
</header>
css
.header {
display: table;
position: relative;
width: 100%;
height: 100%;
background: url(../img/test.jpg) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
I have also added height and width to the html and body tags at the top of my css.
html,
body
#skrollr-body {
width: 100%;
height: 100%;
}
Any ideas...?
Sorry, can't to add comment. Can you describe how it looks now? At first look it seems all is well. Maybe try ro change your position for absolute or fixed