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.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 1 year ago.
Improve this question
my home page has one background with the CSS
body {
background-image: url(image.png);
background-repeat: repeat;
background-position: 0px ;
background-attachment: fixed;
}
and all of my subpages have the same background, but I would like to change them.
The HTML for the toolbar that leads to the subpages, under Tumblr's "Custom Theme":
<body class="pages"><ul class='section' id='section_1'>
<li><span id='section_title_1' class='section_title'><a href='https://website.com/' id='section_link_1'>past projects</a></span>
<ul>
<li id='slide_01' class='slide_title'><center><a href='https://website.com/subpage/'>TITLE</a></center></li>
<li id='slide_02' class='slide_title'><center><a href='https://website.com/subpage/'>TITLE</a></center></li>
</ul>
</li>
</ul>
I tried adding something like
ul.class {
background-image: url(image2.png);
background-repeat: repeat;
background-position: 0px ;
background-attachment: fixed;
}
above it but it only changed the background of the toolbar text and not the subpages.
And on Tumblr I click on a different window to edit the subpages, which have an HTML section that looks like:
<div id="exhibit">
<div class="container">
<div class="top"><!-- --></div>
<div id="img-container2">
<div class="picture" id="node001" style="width: 400px;">
<div></div>
<div class="captioning text2" style="width: 750px; height: 30px;">
<div style="padding: 0 10px 0 0;"> </div>
</div>
</div>
<div class="separator" style="float: left; width: 10px;"> </div>
<div class="picture" id="node002" style="max-width: 100%;">
<div><img class="done" height="600" src="https://displayimage.png" /></div>
<div class="captioning text2" style="max-width: 100%; height: 30px;">
<div style="padding: 0 10px 0 0;"> </div>
</div>
</div>
</div>
</div>
and I tried to put this before that on this specific page editor
body {
background-image: url(image2.png);
background-repeat: repeat;
background-position: 0px ;
background-attachment: fixed;
}
or
body2 {
background-image: url(image2.png);
background-repeat: repeat;
background-position: 0px ;
background-attachment: fixed;
z-index: 999
}
but nothing happened to the subpages. Similar advice on here say to look for things like <body id="menu"> or <body id="contact-us"> and I may be able to go from there if I knew where that was with regards to the HTML on my subpage, and I don't know.
-
Thanks for the suggestions! Today I have the CSS set up like
body {
background-image: url(image.png);
background-repeat: repeat;
background-position: 0px ;
background-attachment: fixed;
}
body.subpages {
background-image: url(image2.jpg);
background-repeat: repeat;
background-position: 0px ;
background-attachment: fixed;
}
and the HTML in the other window is currently
<body class="subpages">
<div id="exhibit">
<div class="container">
<div class="top"><!-- --></div>
<div id="img-container2">
<div class="picture" id="node001" style="width: 400px;">
<div></div>
<div class="captioning text2" style="width: 750px; height: 30px;">
<div style="padding: 0 10px 0 0;"> </div>
</div>
</div>
<div class="separator" style="float: left; width: 10px;"> </div>
<div class="picture" id="node002" style="max-width: 100%;">
<div><img class="done" height="600" src="https://displayimage.png" /></div>
<div class="captioning text2" style="max-width: 100%; height: 30px;">
<div style="padding: 0 10px 0 0;"> </div>
</div>
</div>
</div>
</div>
</body>
This doesn't change the background at all so far. Two setups I tried an hour ago that did change the background to the second image were
body {
background-image: url(image.png);
background-repeat: repeat;
background-position: 0px ;
background-attachment: fixed;
}
body.core {
background-image: url(image2.png);
background-repeat: repeat;
background-position: 0px ;
background-attachment: fixed;
}
body {
background-image: url(image.png);
background-repeat: repeat;
background-position: 0px ;
background-attachment: fixed;
}
body:not([id="subpages"]) {
background-image: url(image.png);
background-repeat: repeat;
background-position: 0px ;
background-attachment: fixed;
}
But they all changed the backgrounds to image #2 across the board (both home and subpage). I think I am having trouble differentiating subpage ID and main page ID from each other and their location.
Any advice or tips are appreciated. Thank you!
If the main page does not have an ID on the body, but the subpages do, you could use a selector like:
body[id] to select the subpages and override the base body styles.
Alternatively you could use body:not([id="home"]) (or whatever the ID on your home page) to override the default for subpages.
Another option is to set the default body style for the subpages and then override that with #home (or body#home) (or whatever your home ID is) with the background for that page.
You need to use different classes for the body element on the different subpages and create CSS rules for those classes, either with or without the body appended in the CSS selectors, like
body {
[...main settings...]
}
body.yourclass1 {
[...other settings...]
}
In HTML, the opening body tag for the first subpage would look like this:
<body class="yourclass1">
And so on, with as many classes as you like. You could also use IDs instead, it doesn't really make much difference, as long as you use it only in the body tag, i.e. only once in an HTML document.
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;
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 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
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.