I tryed almost everything but doesn't work.
This is my code:
html, body{
width: 100%;
height: 100%;
margin:0px; }
.banner {
background: rgba(0, 0, 0, 0) url('http://wallpoper.com/images/00/31/33/51/black-background_00313351.jpg') 0 0 no-repeat fixed;
text-align: center;
background-size: cover;
height: 350px;
width: 100%;
margin-bottom: 3em;
display: table;
height: 100%;
}
<div class="banner" id="bannera"></div>
<div class="l-content" style="height: 700px;"> </div>
Try it: jsfiddle.net/6rf4o2aj/
Apply the background to body instead of banner. http://jsfiddle.net/6rf4o2aj/2/
Related
I will wish to get a result like this for example in CSS.
Here is my result for now
How to do to have the same result that the first image?
Here is below my code.
.banner02{
height: 100px;
width: 100%;
position: absolute;
margin: 0px;
}
And my HTLM
<div class="my_banner_reg">
<img class="banner02" src="images/slider.jpg"/>
</div>
Thanks
I don't know what you are written, But add the following styles to your element that have background-image:
header{
width: 100%;
height: 100px;
background-image: url(http://trak.in/wp-content/uploads/2018/01/10-Rupees-Coins.jpg);
background-size: cover;
background-position: center;
}
<header></header>
And another way:
div {
width: 100%;
height: 100px;
overflow: hidden;
}
div > img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div>
<img src="http://trak.in/wp-content/uploads/2018/01/10-Rupees-Coins.jpg" />
</div>
I want my background image to cove the entire div but instead there are a lot of white space
HTML
<div class="backgroundsecction">
<div class="backgroundimg"></div>
</div>
CSS
.backgroundimg{
background-image: url(https://i.imgur.com/MAdBtV4.png);
height: 100%;
width: 100%;
background-repeat: no-repeat;
position: relative;
}
.backgroundsecction{
height: 900px;
width: 100%;
}
Please use background-size:cover
.backgroundimg{
background-image: url(https://i.imgur.com/MAdBtV4.png);
height: 100%;
width: 100%;
background-repeat: no-repeat;
position: relative;
background-size:cover;
}
.backgroundsecction{
height: 900px;
width: 100%;
}
<div class="backgroundsecction">
<div class="backgroundimg"></div>
</div>
If the white border bothers you around the background, use something like this:
.backgroundimg {
background-image: url(https://i.imgur.com/MAdBtV4.png);
height: 100%;
width: 100%;
background-repeat: no-repeat;
position: relative;
}
.backgroundsecction {
height: 900px;
width: 100%;
}
body {
margin: 0;
}
<div class="backgroundsecction">
<div class="backgroundimg"></div>
</div>
If the image is smaller than the screen, than use larger image. it is generally good practice to prepare that some people could have very very large resolution displays...
Or scale it up, like #ankitapatel mentioned: with background-size:cover;.
Use 2 things as suggested
body {
margin : 0px; //add this
}
.backgroundimg {
background-image: url(https://i.imgur.com/MAdBtV4.png);
height: 100%;
width: 100%;
background-repeat: no-repeat;
position: fixed; //change fixed to cover entire
}
.backgroundsecction{
height: 900px;
width: 100%;
}
<div class="backgroundsecction">
<div class="backgroundimg"></div>
</div>
I am trying to add a "strip" of an image to the left top of the div as a background with a fixed attachment property. Here it is:
https://jsfiddle.net/mvfariajr/recLr6yf/
HTML:
<div id="wrapper">
<div id="container">
<h1>TESTING</h1>
</div>
</div>
CSS:
#wrapper {
width: 100%;
height: 500px;
background-color: #ccc;
}
#container {
text-align: center;
margin: 0 auto;
width: 80%;
height: 400px;
background-color: #fff;
background-position: left top;
background-repeat: no-repeat;
background-size: 70px 100%;
background-attachment: fixed;
background-image: url(http://ariseartgroup.com/interiors/wp-content/uploads/2017/01/metal-texture-trim.jpg);
}
The issue is that the background isn't always to the left of the div.
Any help?
Thanks!
Here you go:
#wrapper {
width: 100%;
height: 500px;
background-color: #ccc;
}
#container {
text-align: center;
margin: 0 auto;
width: 80%;
height: 400px;
background:white url("http://ariseartgroup.com/interiors/wp-content/uploads/2017/01/metal-texture-trim.jpg") 10% 50% no-repeat;
background-size: 70px 100%;
background-attachment: fixed;
}
<div id="wrapper">
<div id="container">
<h1>TESTING</h1>
</div>
</div>
I was wondering how to center 3 divs inside a div.
Here is my code example
body {
position: fixed;
height: 100%;
width: 100%;
}
#container {
border: 3px solid black;
height: 90%;
width: 90%;
}
.plaatje {
width: 30%;
height: 70%;
border: 2px solid black;
float: left;
text-align: center;
}
#plaatje1 {
background-image: url("http://image.prntscr.com/image/c3d5dbc04f664a3386b372d8e4ceb4c7.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje2 {
background-image: url("http://image.prntscr.com/image/2bcfd124f98a448cbae822337818ff4e.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje3 {
background-image: url("http://image.prntscr.com/image/e1b7059d626f47cb94535bbba9887cc1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
<div id="container">
<div id="plaatje1" class="plaatje">
</div>
<div id="plaatje2" class="plaatje">
</div>
<div id="plaatje3" class="plaatje">
</div>
</div>
The problem is, there is still a white space on the right hand-side of the picture, I have marked it so you know what i'm talking about.
It also needs to scale, so if I resize the window, that the third image doesn't pops below the first or that the space exists when I resize it fully.
Any help is appreciated.
I have created a jsFiddle which demonstrates how you can do this using flexbox. It doesn't require floating the elements and gives you with exactly what you're looking for.
I have added a wrapper around the images (.images) and given it the flex properties required to align its contents, then removed the floats and a few other unnecessary things.
Here is the browser support for flexbox: caniuse:flexbox
body {
position: fixed;
height: 100%;
width: 100%;
}
#container {
border: 3px solid black;
height: 90%;
width: 90%;
}
.images {
height: 90%;
display: flex;
justify-content: center;
}
.plaatje {
width: 30%;
height: 70%;
border: 2px solid black;
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje1 {
background-image: url("http://image.prntscr.com/image/c3d5dbc04f664a3386b372d8e4ceb4c7.png");
}
#plaatje2 {
background-image: url("http://image.prntscr.com/image/2bcfd124f98a448cbae822337818ff4e.png");
}
#plaatje3 {
background-image: url("http://image.prntscr.com/image/e1b7059d626f47cb94535bbba9887cc1.png");
}
<div id="container">
<div class="images">
<div id="plaatje1" class="plaatje"></div>
<div id="plaatje2" class="plaatje"></div>
<div id="plaatje3" class="plaatje"></div>
</div>
</div>
You could just simply try adding text-align:center; to your container div
There are many ways to do this, and you should probably start with http://www.w3schools.com/css/css_align.asp - this elementary level question often gets flagged as not appropriate for SO.
But! Welcome. Here's one way you could do this - I've added comments to explain what's going on. Basically your float: left by definition made the .plaatjes impossible to center; and the text-align: center needs to be on the containing element
body {
position: fixed; /* probably don't actually want */
height: 100%;
width: 100%;
margin: 0; /* add */
}
#container {
border: 3px solid black;
height: 90%;
width: 90%;
margin-left: 5%;
text-align: center; /* add */
}
.plaatje {
width: 30%;
height: 70%;
border: 2px solid black;
/* float: left; // remove
text-align: center;*/
display: inline-block; /* add */
}
#plaatje1 {
background-image: url("http://image.prntscr.com/image/c3d5dbc04f664a3386b372d8e4ceb4c7.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje2 {
background-image: url("http://image.prntscr.com/image/2bcfd124f98a448cbae822337818ff4e.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje3 {
background-image: url("http://image.prntscr.com/image/e1b7059d626f47cb94535bbba9887cc1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
<div id="container">
<div id="plaatje1" class="plaatje">
</div><div id="plaatje2" class="plaatje">
</div><div id="plaatje3" class="plaatje">
</div>
</div>
<!-- removed spaces between the divs -->
I have designed a webpage .The top part is header with height:77px .After header i want to add a image at the center of the screen with width of width: 960px; .Now the problem that i am facing is that the image is coming from the top inside of the header means that second image is coming from the top whereas i need to display after the height of 77px;
Here is the HTML..
<div id="headerbodyimage" style="width: 960px; margin-top: 77px; margin: 0 auto;" class="headerbody-wrapper">
</div>
And here is the CSS..
.headerbody-wrapper {
background: url("../images/banner.jpg");
height: 242px;
position: inherit;
width: 100%;
z-index: 60001; }
I have tried to change position but its collapsing whole page
Here is my header code in html..
<div class="header-wrapper">
</div>
and this my CSS.
.header-wrapper {
background: url("../images/header_bg.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
float: left;
height: 77px;
margin: 0 auto;
position: absolute;
width: 100%;
z-index: 60001; }
Please help me.
With the margin: 0 auto; in your style attribute you overwrite your margin-top: 77px;. margin: 0 auto; is the shorthand for margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;. Go with:
Here is a demo.
HTML:
<div class="header-wrapper"></div>
<div id="headerbodyimage" class="headerbody-wrapper"></div>
CSS:
.header-wrapper {
z-index: 60001;
width: 100%;
height: 77px;
margin: 0 auto;
background: url("http://placehold.it/77x77") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
}
.headerbody-wrapper {
z-index: 60001;
background: url("http://placehold.it/960x242");
width: 960px;
height: 242px;
margin: 0 auto;
}
headerbody-wrapper {
background: url("../images/banner.jpg");
height: 242px;
position: inherit;
width: 100%;
z-index: 60001;
background-positon:xxx;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position