Hi I have searched in previous questions and tried multiple ways but I still have trouble setting up opacity of my background image without effecting opacity of font.
this is my html:
<main>
<div class="background">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="center">
<h1>My name</h1>
<h3>this is my website</h3>
<hr>
<button id = "mainButton" type="button" class="btn btn-default btn-lg">Get Started!</button>
</div>
</div>
</div>
</div>
</div>
</main>
and this is css:
.background{
background-image: url("xxx.jpg");
width: 100%;
height:100%;
position:fixed;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
opacity:0.5;
}
*I tried to use rgba(0,0,0,0.5);
*I tried to set up another css rule just for h1, or the div with the text but still the same.
Please can anyone help?
Make the markup like this:
<main>
<div class="background">
</div>
<div class="container">
</div>
</main>
Give to main position: relative;
Give to background div position: absolute;
Fix the rest. You're done.
About background size
You can modify the image background size by background-size and using values like cover, contain, 100%, 100% 100% etc.
If you want to cover all the page, use value 100vh, meaning 100% of the viewport height.
Related
I am making a small eastern project. The website is here: My Website.
I need to make some boxes that contain a png picture on top of the background-picture like this:
I set the picture on the col, but I guess I need to make it as a background in CSS, since I cannot build something on top of an img tag:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<center><img src="https://mimsi.dk/images/logo.jpg" class="img-fluid" alt="Eastern"></center>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="https://mimsi.dk/images/eeg.jpg" alt="Eastern game" class="background">
</div>
</div class="row">
<div class="col-md-12" style="border: 1px solid red;">
<h1 style="text-align: center;">FOOTER</h1>
</div>
</div>
</div>
Instead of using the img src tag, I set this in my HTML and CSS:
<div class="col-md-12 bg">
.bg {
background-image: url("https://mimsi.dk/images/eeg.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
But nothing has worked out yet. How can I set the background-image, so it is not going to the header logo or footer, so I can build my 8 boxes on top?
First there is a mistake in your HTML in this line </div class="row"> i think you got that you can't put class in closing div
Solution
I created a fiddle
I have a responsive image which is leaving white space under the image when resizing the browser. I tried cover but the image doesn't resize at all only setting the background to 100% gives perfect responsiveness. I tried multiple other solutions from stack overflow and none seem to work.
error here :https://drive.google.com/open?id=0BxHtDrLLi2x5ckJNMVVNblRSSWc
css:
#jumbotron{
text-align:center;
background-color:#71706e;
padding-top:80px;
width:100%;
background: url(images/showcase5.jpg) no-repeat;
background-size: 100%;
}
html:
<section id = "jumbotron">
<div class="text">
<h1 class="animated slideInDown">Now now now!</h1>
<h2 class="animated slideInDown">Now now now now<br> before your now do!</h2>
<a href="#" class="learnMore " >Get Started</a>
</div>
</section>
<div id="recent">
<h3>Recent Projects</h3>
</div>
The general concept is to set the height of the container to 0 and use a vertical padding that matches the background image aspect ratio. To get that padding, divide the image height by the width and multiply by 100 to get a percentage. Then the div will scale the same as the background image. And just set the background size to 100%, contain, or cover.
#jumbotron {
background: url('http://placehold.it/1920x1265') 0 0 no-repeat / cover;
padding-bottom: 65.89%;
height: 0;
text-align: center;
}
<section id = "jumbotron">
<div class="text">
<h1 class="animated slideInDown">Now now now!</h1>
<h2 class="animated slideInDown">Now now now now<br> before your now do!</h2>
<a href="#" class="learnMore " >Get Started</a>
</div>
</section>
<div id="recent">
<h3>Recent Projects</h3>
</div>
I can not understand how to remove the top and bottom of the strip , and that would be in other places it was normal .
<div class="ma_linenums">
<div class="ma_linenum">
<div class="num">1</div>
<div class="text">Provide ship to zip code</div>
</div>
<div class="ma_linenum">
<div class="num">2</div>
<div class="text">Select Box-n-Go storage containers to be shipped</div>
</div>
<div class="ma_linenum">
<div class="num">3</div>
<div class="text">Confirm who will be receiving the shipment</div>
</div>
<div class="ma_linenum">
<div class="num">4</div>
<div class="text">Confirm all the information provided</div>
</div>
<div class="ma_linenum">
<div class="num">5</div>
<div class="text">Box-n-Go representative will calculate the shipping costs and provide you with a quote</div>
</div>
<div class="ma_linenum">
<div class="num">6</div>
<div class="text">Once we recive your approval, we will shio the items to you</div>
</div>
<div class="clearfix"></div>
</div>
https://jsfiddle.net/h49hsx89/1/
Need result: http://cs624027.vk.me/v624027836/285ae/thJS61-9ct8.jpg
Solution: https://jsfiddle.net/x3596yn4/3/
The following will fix it:
.ma_linenums {
background: url("http://cs624027.vk.me/v624027836/2858b/qWSCfsvYM3I.jpg") repeat-y;
background-size: 1px 90%;
background-position: 27px;
background-repeat: no-repeat;
}
Originally your picture was repeating the entire height of its container. I restrict this via background-repeat: no-repeat and manually set the height to 250px
If you want to make the height of the line resize to the content then change background-size: 1px 250px; to background-size: 1px 90%;
I have made some changes in the code, and use pseudo class instead to obtain the desire result. Check out this jsfiddle: https://jsfiddle.net/h49hsx89/4/
Here is the css I added to make it possible:
.ma_linenum:before {
content : '';
background: url("http://cs624027.vk.me/v624027836/2858b/qWSCfsvYM3I.jpg") repeat-y;
height:22px;
width:1px;
display:block;
position:absolute;
left:13px;
top:-10px;
}
.ma_linenum:first-child:before {content:'';background:none}
I'm trying to put a background image on my form (like behind the text and inputs, just like a background image of my web site), using the Bootstrap framework but the image appears at the bottom and I want it inside the "container".
My code is something like this:
<div class="container">
<div class="thumbnail">
<form....>
<fieldset>
.
.
.
</form>
<img src="cs.jpg" class="img-responsive">
</div>
<div>
Have you tried setting the background image of that container as the image? IE:
.container {
background-image: url("cs.jpg");
}
Or you can do it inline:
<div class="container" style="background-image: url('cs.jpg');">
...
</div>
or you could try like this..
<body>
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>...</p>
</div>
</div>
</body>
and in css like this:
.jumbotron {
position: relative;
background: #fff url("slide.jpg") center center;/*slide.jpg =>you image*/
width: 100%;
height: 100%;
background-size: cover;
overflow: hidden;
}
I've a background image for body and a background color for wrapper div.
I haven't set any height for body and I'm using a min-height:1000px for wrapper.
But if wrapper height extends 1000px;, the background color of wrapper is as body background image.
HTML Code:
<body>
<div id="wrapper">
<div id="header">
<div id="headercontainer">
<div id="company"></div>
<div id="tagline"></div>
<div id="navigation"></div>
</div>
</div>
<div id="pagecontainer1"></div>
<div id="footer1"></div>
</div>
Here is the css:
body{
background:#E8EDF0;
margin:0;
width:100%;
background-image: url(http://l1.yimg.com/a/i/ww/met/th/slate/gsprite_pg_slate_20100521.png);
background-repeat: repeat-x;
background-position: 0px -2335px;}
#wrapper{
background-color:#FFF;
min-height:1000px;
width:1008px;
margin:auto;
position:relative;
overflow:visible;
}
How can i fix this background color issue for wrapper.
As the way you coded your page, you can't get the wrapper to cover the full height. So the best way to do it is to make a background image for your full body like this:
grey area##-----white area: 1008px-----###grey area
make it 2000px wide (or more), 1px high, and repeat vertically:
background:#E8EDF0 url(new-background-path.jpg) top center repeat-y;
simply add <div style="clear:both"></div> in pagecontainer1 div. coz i think there are some float div so to clear float use float clear or you can use overflow:hidden; rather than overflow:visible;
<div id="wrapper">
<div id="header">
<div id="headercontainer">
<div id="company"></div>
<div id="tagline"></div>
<div id="navigation"></div>
</div>
</div>
<div id="pagecontainer1">
<div style="clear:both"></div>
</div>
<div id="footer1"></div>
<div style="clear:both"></div>
</div>