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/
Related
I have an outer div, that has two divs.
One div works as a background and has a background image, and other one works as the content and has a background color of #fff, the one that works as a content has a title and an input.
I was trying make a border for my input , that shows what is behind the content div.
Because the proportions of the the background div changes on hover(on pupose), changing the way the border of the input should look.
So i decided to have a div as the border of the input.
But i have been stuck on trying to make the border to show what is behind the content div.
Here is the code:
#chat_bi{
position: absolute;
left: 0;
top:0;
background-repeat: no-repeat;
background-image: url("http://wallpapercave.com/wp/GProxpt.jpg");
background-size: cover;
z-index: -1;
filter: brightness(60%);
height: 100%;
width: 100%;
transition: 0.5s;
}
#outer_div_chat{
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: calc(100% - 400px);
padding: 50px;
}
.chat{
padding: 15px;
z-index: 2;
box-shadow: 0px 0px 15px rgba(0,0,0,0.3);
background-color: #fff;
}
#outer_div_chat:hover #chat_bi{
width: 105% !important;
height: 105% !important;
filter: brightness(95%);
}
#start_up_chat_div{
display: flex;
flex-direction: column;
}
/*text-input*/
.text_input_div{
padding:5px;
background-image: url("http://wallpapercave.com/wp/GProxpt.jpg");
}
.text_input{
outline:none;
padding:2px 4px;
border:none;
width: 100%;
box-sizing: border-box;
}
<div style="height:625px; overflow:hidden;">
<div id="outer_div_chat">
<div id="chat_bi"></div>
<div class="chat">
<div id="start_up_chat_div" >
<span style="padding-bottom: 10px;">Random text</span>
<div class="text_input_div">
<input type="text" class="text_input">
</div>
</div>
</div>
</div>
</div>
I kind of guess that one solution is applying, the same background to the border of the input div, in the same position, and size, but i was wondering if there is another way around, a more proper way around.
You can try something like this:
CSS
.bigcrazydivwithbackground {
background: url('https://images.pexels.com/photos/28477/pexels-photo-28477.jpg?w=1260&h=750&auto=compress&cs=tinysrgb');
}
.crazytitle {
background: white;
padding: 10px;
}
.crazyinner {
border: 20px solid white;
}
.crazyinputwrapper {
margin: 20px;
}
input {
display: block;
width: 100%;
background: white;
line-height: 20px;
border: none;
}
HTML
<div class="bigcrazydivwithbackground">
<div class="crazybox">
<div class="crazytitle">
Title
</div>
<div class="crazyinner">
<div class="crazyinputwrapper">
<input type="text" />
</div>
</div>
</div>
</div>
https://jsfiddle.net/hLphc3nu/
Maybe instead of position: absolute and position: relative, make them both position:absolute so the z-index's will work. Sometimes using a negative z-index might also be the problem.
Start at 0 and go up from there, rather than using -1. For instance, set the div containing your inputs and labels to a z-index of 100, and give the image you want to place behind it a z-index of 50.
Most likely a css problem, the images I'm using as backgrounds for each page are repeating & varying in size. The homepage is the only completely functional section.
Here's a live example: http://athenatestingwebsite.tumblr.com/
And here's my html:
<div id="PROJECTSP">
<a id="projects" class="smooth"></a>
</div>
<div id="CONTACTP">
<a id="contact" class="smooth"></a>
</div>
and here's some of my css:
body {
height: 1000px;
}
#projectsp {
height: 1000px;
width: 100%;
background-color: #0a0b38;
display: inline-block;
text-align: center;
background: url("http://i.imgur.com/rrmPP7E.png");
}
#contactp {
height: 1000px;
width: 100%;
height: 100%;
background-color: #0a0b38;
display: inline-block;
background: url("http://i.imgur.com/s9gGzHO.png");
}
background-repeat-y: no-repeat;
add this line after every background image you set. remove
body height,width remove all #id height 1000px or 2000px you set..set height auto.
add this class
div.slogan h1 {
margin: auto;
}
hope all will be fix. without the nav overlay.
Happy Coding . Good luck
Can seem to be able to move the image around, I need the image and the text side-by-side and it is, but I would like to be able to move the image done just a little bit so that the middle part or the image is lined up with the text. Right now it is the bottom and no matter what I do it wont move up or down, here is the html for the div and then the css
<div class="img">
<img src="/image/file/location">
<div class="imgwording">
<img src="/image/file/location" class="logoimage">
Test Text
</div>
<div class="sub">
<img src="/image/file/location" class="mail">
Test Text
</div>
<div class="imagelinks1">
Training &</br>Events
</div>
<div class="imagelinks2">
Trauma & Gender</br>Projects
</div>
<div class="imagelinks3">
Behavioral Health</br>Resources
</div>
</div>
CSS:
.imgwording {
text-decoration: none !important;
line-height: 1.28;
letter-spacing: 1.5px;
text-align: center;
font-size: 48px;
padding: 0px 60px !important;
position: absolute;
top: 65px;
width: 100%;
font-family: eb garamond,serif;
color: #fff;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
left: -110px;
display: inline-block;
}
.logoimage {
width: 50px;
height: 100px;
}
From what I understand, you have an image and text side by side but the image is lower than it should be. What you could do is add padding-bottom to the image CSS to change its position. How many pixels you would want to move would depends on how much higher you want the image to go.
Basically doing:
.logoimage {
width: 50px;
height: 100px;
padding-bottom: 5px; /* this could be any value depending */
}
Believe after some digging I got it, just need to add
position: relative;
to the .logoimage css
Add vertical-align:middle; to your logoimage class:
.logoimage {
width: 50px;
height: 100px;
vertical-align:middle;
}
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>
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