I'm building a simple site with bootstrap and I can't seem to get the background-image css styling to work. I want to put it on my .jumbotron div which is the first section of my website (besides the navbar, some would call it the hero section).
Here is my code, where did I go wrong?
.main-banner {
background-image: url("../img/collection-of-classic-cars.jpg") no-repeat;
}
<section>
<div class="jumbotron">
<div class="container">
<div class="main-banner"></div>
<h1>Welcome!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a class="btn btn-primary btn-lg" href="#name" role="button">Contact us</a>
</div>
</div>
</section>
File Path:
/img/collection-of-classic-cars.jpg
Note that the image URL should be relative to the stylesheet not the HTML you are serving. So most likely your image path is not correct. Other very common mistake is mismatch in the file name. FOO.jpg is not the same as foo.jpg in unix like systems.
You shouldn't use no-repeat in background-image property, it's can be used within background shorthand, so make it this way:
.main-banner {
background-image: url("../img/collection-of-classic-cars.jpg");
background-repeat: no-repeat;
}
http://tympanus.net/codrops/css_reference/background-image/
http://tympanus.net/codrops/css_reference/background-repeat/
<div class="main-banner"></div> have no size...
http://jsfiddle.net/fnw39gco/1/
no repeat need to define as own css tag:
background-repeat:no-repeat
http://www.w3schools.com/cssref/pr_background-repeat.asp
As vicodin stated, your CSS code is wrong. The background-image property will only accept a URL. The best way would be to use the background shorthand:
background: url("../img/collection-of-classic-cars.jpg") no-repeat;
/* Adding even more options */
background: #FFF url('img.jpg') center fixed no-repeat;
/* Which would be the same as */
background-color: #FFF;
background-image: url('img.jpg');
background-position: center;
background-attachment: fixed;
In my case, after going through many SO(Stack Overflow) Questions and almost after many hours of searching it on the internet. I came up with this
It worked when I saw the error on the console and the path, it was showing, missing some part of it(path)
Path shown on the console:
file:///E:/dist/img/model-1.jpg
So, I just provided the missing part and it worked.
Related
HTML & CSS newbie can't work out why div container isn't being applied - I put the color as red to test it on the font - but it's not updating. I've named the container class as home.hero
I want to use a container for it, as I want to make text changes max width etc only affecting the text and not the background.
I am very bad at explaining this atm!
Thanks in advance (sorry for being a newb/noob/n00b)
P
section#home {
background: url('images/test.png') no-repeat center center/cover;;
color: white;
justify-content: left !important;
padding: 8%;
max-width: 60%;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
.home-hero {
color: #E83C3C;
}
<section id="home">
<div class="home-hero">
<h2 class="text-dark">Hello we are,</h2>
<img src="images/test.png" alt="">
<h2>Test <h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In molestie, augue vitae interdum rutrum, quam.</p>
</div>
</section>
Your code does work for me, therefore I would suggest to you that makes sure that your css-link is correct.
You can in a lot of developer tools ctrl+click the css-link in the HTML file, and then you should be directed to the css-file. If you're directed to an undefined file or gets asked to create said css file, you know for sure that the file path in your html-document is wrong.
Note: css-link are in the head of the html-document and looks like this:
<link rel="stylesheet" href="aFolderHere/yourpage.css" type="text/css" />
or if your css is in the same directory/folder as your html is would look more like this:
<link rel="stylesheet" href="yourCSS.css" type="text/css" />
You have double semi-colons behind the first line in your css - this probably makes the browser stop reading past this point as it produces an error, so none of the remaining css is read:
section#home {
background: url('images/test.png') no-repeat center center/cover;;
change to
section#home {
background: url('images/test.png') no-repeat center center/cover;
I have a strange situation here. I've tried both adding a bg image to a customized style to override/extend a bootstrap style (column) as well as just embed a style in the div attribute. For whatever reason, neither seems to work.
examples..
<div class="col-lg-4 col-md-6 col-sm-12 text-center" style="background:image
url('images/test_back.jpg')">
<img class="rounded-circle" alt="140x140" style="width: 140px; height: 140px;"
src="images/140X140.gif" data-holder-rendered="true">
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</div>
Then, in another one I do the following:
in the HTML file:
<div class="columns divboxshadow_rt">
<p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p>
<h4>Bargains ()</h4>
<div id="mycarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/deals-steals1.png" class="d-block w-80" alt="Steals and Deals 10">
</div>
</div>
</div>
The above does not work...HTML that does have a style reference embedded in the div tag that does work...
<div class="columns" style="background-image:
url('images/test_back.jpg')">
in the CSS file:
.divboxshadow_rt {
width: 22%;
background-image: url('images/test_back.jpg');
/* border-left: none; thin #BFB9B9;*/
border: 2px solid #968E8E;
border-top: none;
border-left: hidden;
padding-left: 10px;
padding: 2px ;
padding-left: 8px;
margin: 5px auto;
box-shadow:0 4px 5px #888888;
border-bottom-right-radius: 11px ;
border-bottom-left-radius: 4px ;
align-content: center;
align-items: center;
text-align:center;
}
BTW, neither that bkg image ref housed in the divboxshadow_rt class embedded in single or double quotes works.
Any ideas what could be preventing this from being rendered? This seems like it should be pretty straightforward. I should clarify that all of the attributes in the divshadowbox class above are showing, EXCEPT for the bg image. I have since altered this CSS file and this class, but I have another issue in that the left border seems to show no matter what I do - i.e. make it hidden, none, etc. I looked at the BS CSS file and I don't see cols listed with border attributes so I wouldn't think that affects it. Anyone know why a border on the left side would show no matter what? Thanks!
ok, this is strange. This was a false read from the IDE of the Creative Cloud in DreamWeaver! Very aggravating, and not sure why it works this way, but it would not traverse to the path properly where my basic HTML or template file was saved.
So DW wanted to go to /images/img.jpg or "images/img.jpg but needed to traverse up one more directory to get there! Problem solved, finally.
wow. It turns out the IDE in Dreamweaver was incorrectly mapping these for some reason. Luckily I figured it out and fixed it; problem solved.
I am not good with javascript or jquery, so maybe i will get help here. I need script, which automatically find element height, and put that height as css style in div.
I made simpe hover (overlay) effect, but as you can see in demo, when i am hovering image, overlay effect shows in all div. I need, that overlay will be displayed only in image dimensions.
I found this script:
$(document).ready(function() {
$('.overlay').click (function () {
alert($(this).height());
});
});
But this script is not what i am searching for. It gives me height when i am clicking on the element. But how i can make it to show me automatically when page is loaded? How can i post height to div style?
HTML
<div class="item">
<img src="http://placekitten.com/450/550" class="image">
<a class="overlay" href="#">
<h3 class="title">Some title</h3>
<div class="description">
<p>
Lorem ipsum dolor sit amet, <br>
consectetur adipisicing elit.
</p>
</div>
</a>
<div class="information">
<span>Some information, long text... etc</span>
</div>
</div>
CSS
.overlay {
width: 100%;
background-color: rgba(0,0,0,0.5);
position: absolute;
top: 0;
left: 0;
text-decoration: none;
color: #fff;
display: none;
}
DEMO http://codepen.io/anon/pen/raVLgV
Sorry for my BAD english, and thank you for any help.
in first: make sure the jQuery has beed loaded in document, so add follow code in demo
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
Second the script
window.onload = function() {
$('.overlay').css('height', $('.image').height() );
}
why no using $(document).ready() ?
because window.onload will run after DOM and image load completed.
$(document).ready() run just DOM load completed.
Demo http://codepen.io/anon/pen/azOmom
I want to set the <img>'s height to use <h1></h1>'s height.
For example: the <h1></h1> height is 10em, so I want the <img>'s height is 10 em as well.
But the problem is I don't know the exact height of <h1></h1> on each web browser.
I tried to set <img>'s height in percents but it did't work. What should I do?
Here is my original code:
<div class="row" style="margin-top: 1%;">
<div class="large-9 columns">
<h1><img src="img/UnionJR.png"> English</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<div class="large-3 columns">
<img src="http://placehold.it/350x150&text=Img">
</div>
</div>
Thanks
I tried this and this kind of works for Chrome. (I haven't tried with the others)
<h1><img src="img/UnionJR.png" style="height: 1em;"> English</h1>
It seems like a bad way to slove this problem but for brief work it will do.
Anyway, I still want to know other methods. Please add more!
Unless I'm missing something here, if your h1 has a specific height set e.g.
h1 {
height: 10em;
}
you should be able to use
h1 img {
height: 100%;
}
Percentage heights do work if their parent element has a specific height set.
Just tried this in chrome and it works - the image takes the height of the h1.
<html>
<body>
<div class="row" style="margin-top: 1%;">
<div class="large-9 columns">
<h1><img src="http://placehold.it/350x150&text=Img"> English</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<div class="large-3 columns">
<img src="http://placehold.it/350x150&text=Img">
</div>
</div>
<style>
h1 {
height: 10em;
}
h1 img {
height: 100%;
}
</style>
</body>
</html>
I know this question is old, however I want to answer this for anyone looking for a solution like I was.
A solution I found worked was to use this css
.imgh1 {
background-image: image.png;
background-repeat: no-repeat;
background-size: contain;
}
And apply it to your header like this
<h1 class="imgh1"> </h1>
I would suggest setting a class for both the <h1> and the <img> tag.
Something like
<h1 class='tall'>
<img class='tall' src="img/UnionJR.png">
English
</h1>
with a style:
.tall {
height: 800px;
}
Keep in mind, however, that using em means that nested elements (if height is defined with em) will multiply by their parent height. So if your heading is 10 em, and your img is 10 em, the image will actually display at 100em or height. (10x10).
I would suggest using a pixel based height in this scenario, since it won't compound the way the em does.
You could add some rule to your CSS file for specific browser and overwrite the any style originally applied:
h1 {
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
}
You can use a fixed height for the <h1> tag and apply height: inherit; max-height: 100%; min-height: 100%; to the image to always keep them of same height. Just keep note that your image should be of specific dimensions to avoid the blurring on applying min and max height styles.
img {
height: inherit;
max-height: 100%;
min-height: 100%
}
h1 {
height: 50px;
}
DEMO
I'm trying to do something semi complicated. I have 4 linked images. when I hover over the image I want the opacity to change to 0.7. I also want a ribbon to become visible when you hover that image. Here's the code I'm using
<div id="tracks-content">
<div class="track enrolled">
<a href=""><div class="ribbon"><img src="ribbon.png"/></div>
<span><img src="images/pic-track1.png" /></span></a>
<h3>Track title 1</h3>
<span>Track description here. Lorem ipsum dolor sit amet con sectetuer adipiscing elit.</span>
</div>
<div class="track unavailable">
<a href=""><div class="ribbon"><img src="ribbon.png"/></div>
<span><img src="images/pic-track2.png" /></span></a>
<h3>Track title 2</h3>
<span>Track description here. Lorem ipsum dolor sit amet con sectetuer adipiscing elit.</span>
</div>
</div>
So if I hover over the image for say track1.png then I want track1.png to dim to 70% and I want the visibility for ribbon.png to change from hidden to visible. I keep running into a problem where the opacity of the image is also applied to the ribbon. In the image you can see when I hover the 1st image the ribbon appears but is also getting the opacity. see link for image http://img.photobucket.com/albums/v513/Tearyguitarist/example.png
Here's the css i'm using
#tracks-content .enrolled a:hover > .ribbon{
visiblity:visible;
}
#tracks-content .enrolled a:hover span img{
outline: solid 1px #40a304;
opacity:0.5;
}
Any suggestions? I can't use any position absolutes since the whole page is php driven and could have 1 or 10 tracks so the content has to be dynamic and reuseable.
I cannot recreate the issue, as it seems to work fine in this demo (note: opacity was changed just to make it more obvious). However, a few things to note that might be causing issues.
1) The most likely issue is that it is invalid html to have a div in an a tag (block level element inside an inline), so some browsers may be having issues with that and not functioning correctly.
2) If your css above reflects your true css, then you have misspelled visibility ("visiblity") in setting the ribbon to visible.
3) Have you verified that the ribbon.png itself does not have its own, inherent opacity (since it is a png, it can have opacity in image itself).
Remove your code and try border with some padding instead of using outlineUse below style:
#tracks-content .enrolled a:hover span img{
border: solid 1px #40a304;
padding:1em;
opacity:0.5;
*filter: alpha(opacity=50);
}