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/
Related
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;
This question already has an answer here:
Make background image the size of screen
(1 answer)
Closed 5 years ago.
Ok, so my question is how do I make my image more responsive? I am a new coder, so I'm still trying to understand css more. I've tried using the contain value, but it doesn't cover the entire div. I also tried cover, but it doesn't show the entire image when it expands inside the div. If anybody has any ideas at all, I would love to hear from you. Thanks Also, it's not the same question as covering the entire page. I want the image to cover inside my div, and it doesn't seem to be working.
.tribute {
margin-top: 40px;
margin-left: 12%;
height: 250px;
width: 35%;
background: url(dickgregory.jpg);
background-size: cover;
float: left;
}
<div id="projects">
<br>
<br>
<h1 class="centerh1">Projects</h1>
<hr class="portfoliohr">
<a href="https://codepen.io/boiledbiscuit/pen/dzeMPW?q=dick+gregory&limit=all&type=type-pens" target="blank">
<div class="tribute">
</div>
</a>
</div>
Your image is taking up the full width and height of your .tribute element. The problem is that you've both added margin to the .tribute element, and restricted its width.
Removing the margins and setting width to 100% shows the image covering the full area as expected.
Note that background-size: cover may stretch or crop the image, and background-size: contain will resize the image to ensure that it is always visible.
This is best demonstrated with an example.
Contain:
.tribute {
height: 250px;
width: 100%;
background: url(http://placekitten.com/310);
background-size: contain;
float: left;
}
<div id="projects">
<br>
<br>
<h1 class="centerh1">Projects</h1>
<hr class="portfoliohr">
<a href="https://codepen.io/boiledbiscuit/pen/dzeMPW?q=dick+gregory&limit=all&type=type-pens" target="blank">
<div class="tribute">
</div>
</a>
</div>
Cover:
.tribute {
height: 250px;
width: 100%;
background: url(http://placekitten.com/310);
background-size: cover;
float: left;
}
<div id="projects">
<br>
<br>
<h1 class="centerh1">Projects</h1>
<hr class="portfoliohr">
<a href="https://codepen.io/boiledbiscuit/pen/dzeMPW?q=dick+gregory&limit=all&type=type-pens" target="blank">
<div class="tribute">
</div>
</a>
</div>
Hope this helps! :)
Unfortunately cover and contain are the best ways to handle an image that isn't the proportion you want. You could use an <img> tag instead of a div with a background image, if that would work for your use. Otherwise, I usually add a background color to the element that is similar to the image, so that it blends in better.
.tribute {
margin-top: 40px;
margin-left: 12%;
height: 250px;
width: 35%;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/7/7b/Dick_Gregory.jpg');
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
background-color: #666;
float: left;
}
<div id="projects">
<br>
<br>
<h1 class="centerh1">Projects</h1>
<hr class="portfoliohr">
<a href="https://codepen.io/boiledbiscuit/pen/dzeMPW?q=dick+gregory&limit=all&type=type-pens" target="blank">
<div class="tribute">
</div>
</a>
</div>
I am completely new to bootstrap, have been working with it for like a week.
I am currently working on a Christmas gift to my girlfriend and I am really stuck.
I want to place a picture and a short text (next to each other) on a background.
The image look really much like this: enter image description here
It's totally left positioned and there is text next to her. (There is also a bit of a place between the image and the text and also between the text and the end of the screen in the right. The picture starts in the left where the screen starts.)
I also want everything to be responsive ofc.
I tried everything but it never really worked and I wasted like 2 days on this issue.
I really can't make it alone! PLEASE HELP!!!
.section_1 {
position: relative;
color: #fff;
background-color: #bdbdbd;
}
.picture {
content: url(http://i.stack.imgur.com/Zlrxu.png);
width: 50%;
position: relative;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.text {
margin-bottom: 20px;
font-size: 16px;
font-weight: 300;
color: rgba(255, 255, 255, .7);
margin-bottom: 20px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<section class="section_1">
<div class="container-fluid">
<div class="row-fluid">
<div class="picture">
<div class="span2">
</div>
<div class="span10">
<div class="text">
<p>Lorem ipsum</p>
</div>
</div>
</div>
</div>
</div>
</section>
In bootstrap 3.x ".row-fluid" class has changed to ".row" and ".span*" classes have been changed to ".col-*". I have made few changes to your code and made it to behave as given in your image link, please click here for plunker demo.
HTML file:
<section class="section_1">
<div class="container-fluid picture">
<div class="row ">
<div class="col-sm-5">
<img src="http://i.stack.imgur.com/Zlrxu.png" class="img-responsive"/>
</div>
<div class="col-sm-7 text"><p>Lorem ipsum</p></div>
</div>
</div>
CSS file:
.section_1 {
color: #fff;
background-color: #bdbdbd;}
.text {
font-size: 16px;
font-weight: 300;
color: rgba(255, 255, 255, .7);
vertical-align: middle;}
I don't know exactly what you are meaning but here's what I think you mean.
JsFiddle
:)
I would like to have something like this:
NORMAL
And in mobile view something like this:
MOBILE
But many thanks anyway! :)
When using Bootstrap as in rraman's answer: because text can have more content that just one "Lorem ipsum," and height of the text div would become greater on smaller screens, your image, even though having class img-responsive (img-fluid), would be left with white space below. To remedy this problem you could use this css on img:
height: 100%;
width: 100%;
object-fit: cover:
object-position: 50% 50%; //for always to show image center
I am fairly new to HTML & CSS. I recently downloaded a theme from bootstrap and I am trying to change the background image of a section/div.Not only have I tried adding code to CSS, but I have also included the background image reference inline with my html code. But I am still not able to change the background. The image is a .jpg.
Here is the HTML Code for the specific section:
<!-- About Section -->
<section class="success" id="about" style="background-image:parallax.jpg;">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h1>About</h1>
<!-- <img class="img-responsive" src="new.gif" alt="" align="middle" align ="center" style="margin-left:auto; margin-right:auto"> -->
<br>
</div>
</div>
<div>
<div>
<p align="left" style="font-family: 'Abel', sans-serif;" > Hello.</p>
</div>
<div class="col-lg-8 col-lg-offset-2 text-center">
<a href="Website Resume.pdf" class="btn btn-outline" style="font-family:'Shadows Into Light', cursive;">
<i style="font-family:'Shadows Into Light', cursive; text-align: center;"></i> Check Out My Resume!
</a>
</div>
</div>
</div>
</section>
Here is the CSS Code :
section.success {
color: #000000;
background: #ffffff;
}
#about{
background-image: url("parallax.jpg") no-repeat center center fixed;
background-size: cover;
height: 300%;
width: 100%;
}
Notice that the inline CSS you wrote in your HTML is not valid, it should be:
background-image: url("parallax.jpg");
As well, the CSS you wrote in your stylesheet is not valid, it should be :
background-image: url("parallax.jpg") !important;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
Or
background: transparent url("parallax.jpg") no-repeat fixed center center !important;
background-size: cover;
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
Your first example should be...
style="background-image: url(parallax.jpg);"
Assuming your CSS file is in the root, your code should be...
background: url(parallax.jpg) no-repeat center center fixed;
Your background may be getting overridden somewhere else. To force the image add !important to the style. Change the CSS to this...
background: transparent url("parallax.jpg") no-repeat fixed center center !impotant;
background-size: cover !impotant;
This tells the browser to use this over any other declaration which might come after it.
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