I've already made the background image to full size in my page, but when I inspect and try to display it in phone mode, my background image get cropped, how can I resist this thing so it can't get cropped but always cover particular part of the page
<div class="inner-banner has-base-color-overlay text-center" style="background: url(header.jpg); background-size: cover; position: center;">
<div class="container">
<div class="box">
<h3>About Us</h3>
</div>
</div>
</div>
If you are using background image and You want see in mobile view then it will be cut off of the background image you need to call img src.
<style>
.header-img {
max-width:100%;
margin:0 auto;
display:block;
}
#media all and (max-width:600px){
.header-img {
height:300px;
object-fit:cover;
}
</style>
<div class="inner-banner has-base-color-overlay text-center">
<div class="container">
<div class="box">
<img src="images/header.jpg" class="header-img" alt="">
<h3>About Us</h3>
</div>
</div>
you can set these css for BackGround Image :
background-position: 100% 100%;
background-size: cover;
and your manual height
replace your style with below code : -
background: url(header.jpg); background-size: 100%; position: center;
Related
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
I'm fairly new to web development and have been trying to make a website using Bootstrap, hosted on github. The bootstrap theme I'm using has a header section which I'm trying to cover with a background image (it was originally just a solid color), however the image doesn't appear.
Here is my code:
HTML - header section:
<header class="masthead" id="banner">
<div class="container">
<div class="col-lg-12 text-center">
<img class="img-fluid" src="img/headshot.png" alt="Headshot">
<div class="intro-text">
<span class="name">NAME</span>
<hr class="star-light">
</div>
</div>
</div>
</header>
CSS:
header.masthead {
text-align: center;
color: white;
background: #148ABC;}
#banner {
background-image: url("/img/banner.jpg") no-repeat center;
background-size: cover;
width: 100%;
height: 100%; }
My "banner.jpg" file which is the background image is located in at "img" folder, which is in the same directory as a "css" folder that contains the actual css file. I've tried the following:
changing the url to "/img/banner.jpg", "../img/banner.jpg" and "img/banner.jpg" (I think the first one is still right?)
removing the #banner id and putting everything in css under header.masthead alone
deleting the width and height
double checking the name of the file (it is banner.jpg)
I've been working on this for days so I'm pretty frustrated with myself. Thanks for your help!
Just try with this snippet , i have changed background-image to background and remove the background color of the header
header.masthead {
text-align: center;
color: white;
}
#banner {
background: url("https://www.w3schools.com/css/trolltunga.jpg") center center no-repeat;
background-size: cover;
width: 100%;
height: 100%; }
<header class="masthead" id="banner">
<div class="container">
<div class="col-lg-12 text-center">
<img class="img-fluid" src="img/headshot.png" alt="Headshot">
<div class="intro-text">
<span class="name">NAME</span>
<hr class="star-light">
</div>
</div>
</div>
</header>
You cannot have no-repeat and cover on background-image as they are property of background. So you can have only image url on background-image.
And also try removing fallback background on header.masthead.
Try below [fiddler][1] for reference.
[1]: https://jsfiddle.net/rajsnd08/qcwvet4p/
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>
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
My ultimate goal is to have a block of text in a fixed position relative to a background image.
But what seems to be preventing this is that when I resize the browser, the image stays the same size like I want, but the image shifts -- i.e., the top of the image rendered isn't always the top of the image source.
Here's a mockup - imagine that I want the block of text to be in the blue box:
http://jsfiddle.net/rrauenza/9hkn8p4e/embedded/result/
The yellow "ceiling" in this picture sometimes disappears for different browser sizes.
<head><style>
.intro-header {
text-align: center;
color: #f8f8f8;
background: url(http://c3softworks.com/demos/images/backgrounds_04.jpg) no-repeat center top;
background-size: cover;
background-position: center top;
height: 700px;
}
.intro-message {
position: relative;
padding-top: 100px;
height: 700px;
}
</style></head>
<div class="intro-header">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="intro-message">
<h1>Title</h1>
<h3>...subtitle</h3>
<hr class="intro-divider">
<div class="col-lg-2 col-lg-offset-3">
<h4>Something</h4>
</div>
<div class="col-lg-2 col-lg-offset-2">
<h4>Something Else</h4>
</div>
</div>
</div>
</div>
</div>
</div>
Remove:
background-size: cover;
If you're counting on the background image not to scale it might help not to ask it to.
Also, in your fiddle .intro-header has a background-position:center bottom, while here you post center top. It needs to be center top of course.