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;
}
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
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.
I've tried multiple ways to overlay the background image with text, to no avail. The template provided on the materializeCSS website involves parallax, which I don't want.
The aim is to have a 'card' sit on top of a large image stretching across the browser window. I actually aim to do this separately for several cards.
Here's my code (for a particular card):
<div class="row center">
<div class="col s12 l6 offset-l6">
<div class="card z-depth-5 teal darken-4">
<span class="card-title white-text text-darken-4">
</div>
</div>
</div>
</div>
I understand that the image tag is to be:
<img src="URL">
But wherever I put it, it doesn't place an image behind the card. I've tried all the obvious stuff such as adding a new div class, but perhaps I'm adding the wrong kind. really racking my brains on this one.
How do I place an image (spanning the width of the browser and around 700px in height) behind a card?
Thank you for your responses!
It was very simple in the end:
<div class = "iris">
<div class = "card transparent z-depth-5">
</div>
</div>
Basically you wrap a div around the card div and then for, in this case, iris, you set the background image using CSS.
.iris {
background-image: url("");
background-repeat: no-repeat;
height: 100vh;
background-size: cover;
}
By using card class 'transparent' you get this cool effect whereby the card is actually see-through and looks like glass, but you do need a high z-depth index so that the shadow of the card illuminates its edges.
Cheeeeers
You can do this in 2 ways
Use the background(background-image) css property. You can also set the background-size to help with the background size (ie keep the image contained in the parent, let it overflow, stretch to fit etc)
Set position css property of the img element to absolute, set the z-index of the card to some value higher than the z-index of the img element.
Do not know if Materialize CSS provides premade css classes for some of these settings you would have to check their documentation.
background css property
CSS
.cardbg {
background:url(URL) no-repeat 0% 0%;
background-size:cover;
}
HTML
<div class="cardbg">
<div class="card z-depth-5 teal darken-4">
<span class="card-title white-text text-darken-4">
</span>
</div>
</div>
Positioned img element
CSS
.container {
position:relative;
}
.card {
position:relative;
z-index:10;
}
.cardbg {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
z-index:1;
}
HTML
<div class="container">
<img src="URL" class="cardbg" />
<div class="card z-depth-5 teal darken-4">
<span class="card-title white-text text-darken-4">
</span>
</div>
</div>
background css demo
.cardbg {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
background:url(http://placehold.it/1024x768) no-repeat 0% 0%;
background-size:cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/css/materialize.min.css" rel="stylesheet" />
<div class="cardbg">
<div class="card z-depth-5 teal darken-4">
<span class="card-title white-text text-darken-4">
Some card
</span>
</div>
</div>
Positioned element demo
.container {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
}
.card {
position:relative;
z-index:1;
}
.cardbg {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
z-index:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/css/materialize.min.css" rel="stylesheet" />
<div class="container">
<img src="http://placehold.it/1024x768" class="cardbg" />
<div class="card z-depth-5 teal darken-4">
<span class="card-title white-text text-darken-4">
Some text
</span>
</div>
</div>
You can add the image as background of some div, or even the whole body
body {
background-image: url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRLcjS59w8iUV6NqkYvcHOzlqS21rr13KyqGppuYJf5KI88AYB_IA');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/css/materialize.min.css" rel="stylesheet" />
<div class="row center">
<div class="col s12 l6 offset-l6">
<div class="card z-depth-5 teal darken-4">
<span class="card-title white-text text-darken-4">Title</span>
<p class="grey-text text-darken-1">Content sdfa sd fas dfa sdf</p>
<br>
<p class="grey-text text-darken-1">Content sdfa sd fas dfa sdf</p>
</div>
</div>
</div>
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>