I am trying to set the background-image on <div class="jumbotron"> which for some reason seems impossible. The image is not being displayed.
If I set the background-image on body with the same code, I get the background-image but not in the jumbotron.
css:
.jumbotron {
background-image: url("/Img/banner.jpg");
background-repeat: no-repeat;
background: #808080;
color: #ffffff;
width: 80%;
max-height: 400px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
}
html:
<div class="jumbotron">
<h1>Text</h1>
<p class="lead">More text</p>
</div>
The problem is that you're setting the background-image property first and then overriding it with the background property.
From MDN:
The background CSS shorthand property assigns explicit given values
and sets missing properties to their initial values.
That last bit is important - and sets missing properties to their initial values.
The initial value for the background-image property is none.
So, by setting the background-image and then setting the background with only the color value it is essentially clearing the background-image, setting it back to none.
Try the following, it will fallback to your background color if the image isn't found or does not load correctly.
background: url("/img/banner.jpg") #808080 no-repeat;
Your rule definition would then become
.jumbotron {
background: url("/img/banner.jpg") #808080 no-repeat;
color: #ffffff;
width: 80%;
max-height: 400px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
}
Here are a two examples to show how it works, one with a working image url and one without that reverts to your fallback color.
Example with working image url
.jumbotron {
background: url("https://placehold.it/650x175?text=BANNER HERE") #808080 no-repeat;
color: #ffffff;
width: 80%;
max-height: 400px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
<h1>Text</h1>
<p class="lead">More text</p>
</div>
Example with a broken image url reverting to fallback color
.jumbotron {
background: url("https://broken.url/noimagehere.jpg") #808080 no-repeat;
color: #ffffff;
width: 80%;
max-height: 400px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
<h1>Text</h1>
<p class="lead">More text</p>
</div>
you need to remove: background: #808080; in the .jumbotron class
Hmn, try to open your browser tools and check this jumbotron. You can try to use Mozilla for it, they have really nice tools and you can very easy manipulate CSS styles.
You can also try something like this:
<div class="jumbotron" style="background-color: #000">
<h1>Text</h1>
<p class="lead">More text</p>
</div>
Related
For some reason, Bootstrap is messing with the background image on a div.
html code:
<div class="wide">
<div class="col-xs-5 line">
<hr>
</div>
<div class="col-xs-2 logo">
Logo
</div>
<div class="col-xs-5 line">
<hr>
</div>
</div>
CSS:
.wide {
width: 100%;
height: 100%;
height: calc(100% - 1px);
background-image: url(http://wp.df.uba.ar/sociofis/wp-content/uploads/sites/11/2016/08/Epidemias4.png);
background-color: #ccccc1; /* Color if image unavailable */
background-size: cover;
}
.logo {
color: #000;
font-weight: 800;
font-size: 14pt;
padding: 25px;
text-align: center;
}
.line {
padding-top: 20px;
overflow: hidden;
text-align: center;
}
.line hr {
border-color: #000;
}
JSFiddle including Bootstrap.
JSFiddle not including Bootstrap.
I'm trying to replicate this example but to no avail. It's not a problem of jsfiddle as by copying and pasting the exact same code to a new jsfiddle it works with no issues.
Apparently the problem is in the image itself. With the image on the original example the background loads correctly and with the one I'm testing it doesn't.
Your <body> element has a height of zero, and your .wide element is using height: calc(100% - 1px) which means 100% of 0 - 1px is -1px.
Give your body element a height of 100%...
https://jsfiddle.net/w6y2nrfy/
I want to fill the background of a div with a photo img similar to the way you would use CSS background-size cover; but in this case it needs to be an img because this is page content and will eventually be coming from our CMS.
Here is what I have so far: http://codepen.io/anon/pen/XmBRPR?editors=110#0
This is what I want it to look like but I don’t want to use CSS background: http://codepen.io/anon/pen/GpBmYz?editors=110
I’m not using Less and my HTML is more basic than setting an image to fill the background of a div
<aside class="row cross-link">
<div class="col-xs-12">
<a class="cross-link-item" href="#"><h5 class="cross-link-text">Local Events</h5><img class="hero" src="http://ridebike.ws/images/heros/Trance-27.5-003x300.jpg"alt=""/></a>
<a class="cross-link-item" href="#"><h5 class="cross-link-text">Local Events</h5><img class="hero" src="http://ridebike.ws/images/heros/Trance-27.5-003x300.jpg"alt=""/></a>
<a class="cross-link-item" href="#"><h5 class="cross-link-text">Local Events</h5><img class="hero" src="http://ridebike.ws/images/heros/Trance-27.5-003x300.jpg"alt=""/></a>
</div>
</aside>
and
.cross-link {
background-color: #7bafd0;
padding-right: 4%;
padding-left: 4%;
text-align: center;
}
a.cross-link-item {
margin: 10px;
padding: 0;
display: inline-block;
width: 200px;
height: 200px;
background-color: #1f26ab;
background-size: cover;
}
.cross-link-text {
margin: 8px;
padding: 2px;
background-color: rgba(0, 0, 0, 0.59);
color: #FFF;
}
by positioning both the text and the image relative to the div and specifying a width and height on the div the desired effect can be achieved.
check out the code pen: http://mbs.red/postion
I have been trying to rack my brain as to why I can't seem to apply any attributes to my H1 tag... I couldn't get it to work and started trying to put a border around it so I could see where the section was actually at. But I couldn't even get the border to appear on the section. At first thinking that maybe you couldn't put a border round a section because it was possibly more of a metaphorical grouping and not an actual "physical" grouping... I then tried putting it within a div tag and an article tag, to which I still had no success...
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<section id="under_banner"></section>
<section id="main_pic"></section>
<section id="title">
<h1>The Adventures of Chris Wakeling!</h1>
</section>
</body>
</html>
And the CSS is...
/* Basic Underlay */
html {
background-color: #03113D;
z-index: -2;
}
#under_banner {
border-radius: 5px;
background-image: url("images/sydney.jpg");
background-position: 0px -180px;
background-size: cover;
margin: 0px auto;
height: 350px;
width: 1100px;
z-index: -1;
}
/* Main Body */
#main_pic {
background-color: #000;
width: 550px;
height: 600px;
}
h1 {
text-align: center;
width: 550px;
height: 600px;
margin: auto;
border: 1px solid #999;
background-color: white;
}
Basically if you open up the code in JSFiddle, in the result there is supposed to be an empty space due to a picture. but I want the "Adventures of Chris Wakeling" to be centered.
Any help would be appreciated...
Cheers in advance.
add this css style
#title h1 {
margin: 0 auto;
}
it will make your h1 come to the center.
Add a closing brace } to #under_banner
the title is centered in relation to body but <section id="under_banner"></section> = width: 1100px; is larger than the body is not.
you can put body {width: 1100px;} and greatest #title will be centered
<body>
<section id="under_banner"></section>
<section id="main_pic"></section>
<h1 id="title">The Adventures of Chris Wakeling!</h1>
</body>
css
/* Basic Underlay */
body {
background-color: #03113D;
}
#under_banner {
border-radius: 5px;
//background-image: url("images/sydney.jpg");
background-color: red;
background-position: 0px -180px;
background-size: cover;
margin: 0px auto;
height: 350px;
width: 1100px;
z-index: -1;
}
#main_pic {
background-color: #000;
width: 550px;
height: 600px;
}
#title {
text-align: center;
color: white;
width: 550px;
margin: 0 auto;
border: 1px solid #999;
background-color: #000;
}
Take a look here for some layout modifications. I think this is what you are likely looking to achieve.
JSFiddle
<body>
<section id="under_banner">Under Banner</section>
<div id="wrapper">
<section id="main_pic">Main Picture Section</section>
<section id="title">
<article>
<h1>The Adventures of Chris Wakeling!</h1>
</article>
</section>
</div>
The problem is, unless you give a frame of reference such as a width to center to, it keeps the block only as big as it is needed. Adding a wrapper around elements that need to stay contained (I notice your banner was expected wide) can help you keep a reference to revert to.
I can't remove border from my images. I've tried many times with different atributes. Still see white border. If you have any suggestion what causes the problem - please explain to me. I'm kinda newbie.
<head>
<style>
img{
border : none;
text-decoration: none;
}
#forum
{
background:url(forum_button.png) 0px 0px no-repeat;
width: 300px;
height: 81px;
}
#forum:hover
{
background:url(forum_button.png) -300px 0px no-repeat;
width: 300px;
height: 81px;
}
#facebook
{
background:url(social_buttons.png) 0px 0px no-repeat;
width: 29px;
height: 29px;
}
#facebook:hover
{
background:url(social_buttons.png) 0px -33px no-repeat;
width: 29px;
height: 29px;
}
#twitter
{
background:url(social_buttons.png) -31px 0px no-repeat;
width: 29px;
height: 29px;
}
#twitter:hover
{
background:url(social_buttons.png) -31px -33px no-repeat;
width: 29px;
height: 29px;
}
</style>
</head>
<body style="background:url(landing.png) no-repeat top #111111; width: 1280px; height: 1024px; border:0;">
<img id="forum" />
<div id="social">
<img id="facebook">
<img id="twitter">
</div>
It's because an img tag MUST have a src="" with a proper link otherwise it will be showing the image as a background like in your case (because of the css on the img) and a broken image on top of it
="#"><img id="facebook"></
It's not a border, what you see is the broken image border.
If you want to keep your code, change the img tag to a div..
Change
border: none;
to
border: none !important;
This way it will override all the parent's declarations and thus has to work.
That's probably because you have no src attribute on your img tags. I'd reccommend using transparent pixel as src in your case.
Insert Image by using img src with proper height and width.
Use Paint or other tools to edit image.
example.
make sure that your original image dont have any border, if it have simply select and crop the image.
maybe the border is not html given but its in your img ?
So open your image in an image program tool like photoshop and zoom to the places where the border is and have a look, if there is a border or not.
You are trying to set an icon image on a link using a background image that can be repositioned on a hover event.
The simplest way of doing this is as follows.
The HTML can be as simple as:
<a class="test" id="test" href="#"></a>
and apply the following CSS:
.test {
background: beige url(http://placekitten.com/50/50) center center no-repeat;
display: inline-block;
width: 50px;
height: 50px;
border: none;
}
Apply the background image on the link (a tag) instead of an img tag, which is not needed.
See demo at: http://jsfiddle.net/audetwebdesign/qAeHL/
I have a social media widgets that i wanna include in my website. I have a grayscale and a colored image for each widget. The trick is to change the color of the widgets to grayscale to colored upon mouse hover. All seems to work correctly until i inserted into the code. The hover no longer works. Could someone have an idea how to solve this problem. Thanks in advance.
here is the html code.
<html>
<header>
<title>image hover</title>
<link rel="stylesheet" type = "text/css" href= "style.css"/>
</header>
<body>
<div id = "wrapper">
<div id = "facebook"><img src = "images/facebook.fw.png"/></div>
<div id = "twitter"></div>
<div id = "googleplus"></div>
<div id = "whatsapp"></div>
<div id = "skype"></div>
</div>
</body>
</html>
and the css:
body{margin: 0; border:0; padding: 0;}
#wrapper{width: 960px; margin: 50px auto; height: 500px; border: 1px solid #dedede;}
#facebook{background-image: url('images/facebook.fw.png'); background-repeat: no-repeat; float: left; height: 52px; width: 52px;}
#facebook:hover{background-image:url('images/facebook1.fw.png');}
#twitter{background-image: url('images/twitter.fw.png'); background-repeat: no-repeat; float: left; height: 52px; width: 52px; margin-left: 10px;}
#twitter:hover{background-image:url('images/twitter1.fw.png');}
#googleplus{background-image: url('images/googlep.fw.png'); background-repeat: no-repeat; float: left; height: 52px; width: 52px; margin-left: 10px;}
#googleplus:hover{background-image:url('images/googlep1.fw.png');}
#whatsapp{background-image: url('images/whatsapp.fw.png'); background-repeat: no-repeat; float: left; height: 52px; width: 52px; margin-left: 10px;}
#whatsapp:hover{background-image:url('images/whatsapp1.fw.png');}
#skype{background-image: url('images/skype.fw.png'); background-repeat: no-repeat; float: left; height: 52px; width: 52px; margin-left: 10px;}
#skype:hover{background-image:url('images/skype1.fw.png');}
The :hover probably works fine, it's just that you added the img tag in front of it and you can't see the change...
You can't change HTML elements on hover with CSS :hover. What you can change with that is the CSS styling. In this case, what you are wanting to do is change the BACKGROUND image from a B&G to the color one. So, in your html you define this as a link, in your css you define its size, regular BACKGROUND image, and then (for example) #facebook a:hover {code stuff}
In other words, get rid of the in the HTML, and instead use the CSS to define the original image and hover state image using the background image attribute. Also, don't forget to define the dimensions for this area.