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;
}
Related
For some reason my image isnt showing on top of my background image. here is my code below
html
<header>
</header>
<section>
<div class="container-fluid">
<div class="row align-item-center">
<div class="col-lg-5 text-center">
<img src="img.png" width="400" alt="jordan1" >
</div>
</div>
</div>
</section>
css
header {
height:100vh;
background: url('backgroundimg.png') no-repeat center center/cover;
}
the background image should have been attributed to the css body tag not header as such
body {
height:100vh;
background: url('backgroundimg.png') no-repeat center center/cover;
}
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
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.
Hi i was trying to create a website with the help of bootstrap 3.3
However I am stuck up with an issue that the image I am using is not responsive ie after a certain period it breaks.
This is the HTML code snippet:-
<div class="img-responsive" id="intro"> <!-- This is the container to display image-->
<div class="row">
<div class="col-sm-6 col-md-6 col-md-offset-3 ">
<div class="box" style="margin-top:62px;">
<h1>Welcome to my world</h1>
<p>Welcome to web development program</p>
<button type="button" class="btn btn-default" id="continue">Continue</button>
</div>
</div>
</div>
The below is my css code snippet:-
#intro{
background: url('images/prog.jpg') fixed;
background-size: cover;
height:650px;
/*position: fixed;*/
}
#continue{
margin-left: 218px;
margin-top: 27px;
color: blue;
}
Please help me with this.I am not sure why the class img-responsive is not working.
img-responsive class for img tag only not for div.
as this is background image, it will not resize but yes, you can use different size image on specific break point
Thanks
![enter image description here][1]i have a problem. The image i put into the background is divided into four part. Header, body1,body2 and footer. My problenm is when body1 and body2 join together there is a line in the image. This also apply the same to body2 when i put a repeat, the line is there at the bottom. The problem is when one image in a div display then another image after that a line appear between them
This is my code:
<div id="header"
style="background-image:url('Graphic/banner.png'); height: 84px;">
</div>
<div id="Body1"
style="background-image:url('Graphic/topper.png'); height: 364px;" >
</div>
<div id="Body2"
style="background-image:url('Graphic/body.png'); height: 364px;">
</div>
<div id="Footer"
style="background-image:url('Graphic/footer.png'); height: 82px;">
</div>
Any idea how to make the line disapear?
Try This: here i have no spaces between the div's, make sure that there are no
white spaces on your images.
<html>
<head>
<title></title>
</head>
<body>
<div id="header"
style="background-image:url('#'); background-color: #EBC64D; height: 84px;">
</div>
<div id="container">
<div id="Body1"
style="background-image:url('#'); background-color: #07ED5F; height: 364px;" >
</div>
<div id="Body2"
style="background-image:url('#'); background-color: #2E16A8; height: 364px;">
</div>
</div>
<div id="Footer"
style="background-image:url('#'); background-color: #E01B6A; height: 82px;">
</div>
</body>
</html>