On the website of Nintendo Online is a post image, which has little dots on it due to CSS. I would like to do this too, but without using a div container around the image.
Here is my current code:
.image {
background: url(http://nintendo-online.de/img/bg-game-header-cover.png) repeat;
}
<img class="image" src="http://media2.giga.de/2013/06/osx_hero_2x.jpg" height="250" width="500px">
What do I have to change to make it visible? If I set z-index to 1 the image goes one stage up either. Is it even possible?
use :before or :after
http://jsfiddle.net/omjo21mk/
div {
background: url(http://media2.giga.de/2013/06/osx_hero_2x.jpg) repeat;
position: relative;
min-height: 200px;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
div:before{
content: '';
position: absolute; top: 0; left: 0;
width: 100%;
height: 100%;
background: url(http://nintendo-online.de/img/bg-game-header-cover.png) repeat;
}
<div></div>
Just use multiple urls in the background css
.image {
background: url(http://nintendo-online.de/img/bg-game-header-cover.png) repeat, url(http://media2.giga.de/2013/06/osx_hero_2x.jpg) no-repeat;
}
See it here
Related
I am trying to make a website, but I have a problem. I have a image, I need it to always fill the complete screen. Just like they do on this website: http://mollyandmepecans.com
This is my website: https://mountainweb-cemre2002.c9users.io/Homepage.html
Thanks!
Remove your image element, and then add this CSS:
body {
background-image: url("MountEverest.png");
background-position: center;
background-repeat: no-repeat;
background-size:cover;
}
Or, if you don't want to use the background, add this to your HTML to replace your image element:
<div class="hero"></div>
And this to your CSS:
.hero {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -100;
background-image: url("MountEverest.png");
background-position: center;
background-repeat: no-repeat;
background-size:cover;
}
use object-fit if you need to cover img element.
.hero{
object-fit: cover;
}
https://css-tricks.com/almanac/properties/o/object-fit/
I am making a layout with an background in body. I need to center it both horizontally and vertically. For that purpose I use background-position:center.
background-image:url('address');
background-repeat:no-repeat;
background-position:50% 50%;
However, the background not positoned correctly vertically: you can see only half of the image in the top of the screen. Check it here link to codepen.
As a solution I tried to use images with different sizes and background-position:50% 50%. Then I double-checked other background-relative selectors and found that if I add background-attachement and change it from its default value which is scroll to fixed, than the image is centered correctly.
Can anybody explain please why this happens?
It happens if you didn't gave the body a height, as its default is 0.
The body's height is based on its content, and a background image doesn't set it.
Here is a sample showing how you need to do
html, body {
margin: 0;
height: 100%;
}
body {
background-image: url(http://placehold.it/200);
background-repeat: no-repeat;
background-position: center center;
}
Sometimes it can create other issues when one need to give the body a height, and when, a positioned div is one option
#bkgdiv {
position: absolute;
left: 0; top: 0; right: 0; height: 100vh;
background-image: url(http://placehold.it/200);
background-repeat: no-repeat;
background-position: center center;
}
<div id="bkgdiv"></div>
So, based on how/if you need to use background-attachment: scroll and/or positioned div's, here is a sample showing their behavior when one scroll (and a fiddle demo to play with)
html, body {
margin: 0;
height: 100%;
}
body {
background-image: url(http://placehold.it/200);
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;
}
#bkgdiv {
position: absolute;
left: 0; top: 0; right: 0; height: 100vh;
background-image: url(http://placehold.it/180/0f0);
background-repeat: no-repeat;
background-position: center center;
}
#bkgdivfixed {
position: fixed;
left: 0; top: 0; right: 0; height: 100vh;
background-image: url(http://placehold.it/160/ff0);
background-repeat: no-repeat;
background-position: center center;
}
<div id="bkgdiv"></div>
<div id="bkgdivfixed"></div>
<div style="width: 5px; height: 150vh; background: red; margin: 5px"></div>
If you want to gave background to body, its really simple task.
initially you need to write css for body and html
html, body {
margin: 0;
height: 100%;
}
The next ting is you need to gave background css to the body
body {
background-image: url(https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg);
background-position: center;
background-repeat: no-repeat;
}
Okey now the image seems to be the center of the body(screen),
Now you can adjust the size using background-size property.
background-size: cover;
The images enlarged enough to cover the entire screen.
background-size: contain;
The images enlarged up to the height or width(which is smaller) of the screen.
you can give fixed size my giving size to it
background-size: Xpx Ypx;
I want to create a box that goes over the whole width of the screen, so always responsive the full screen width.
My current CSS code always limited the box to the Boddy, but I want the full width.
In addition, I want a background image in the box.
Can someone help me?
My CSS:
div.bg {
background-image: url("LINK TO PIC");
background-repeat: no-repeat;
background-size: cover;}
Use Viewport units: vw, vh, vmin, vmax
div.bg {
background-image: url("LINK TO PIC");
background-repeat: no-repeat;
background-size: cover;
width: 100vw;
height: 100vh;
}
read more
div.bg {
background-image: url("LINK TO PIC");
background-repeat: no-repeat;
background-size: cover;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: auto;
z-index: 9;}
The box works and scrolls always at the bottom.
Now I would like a small X in the right corner so that the user can close the box, best function to close and reopen
Is there something which prevents you from setting the div as position:fixed?
If not, it's quite simple:
div.bg
{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: auto;
background-image: url("LINK TO PIC");
background-repeat: no-repeat;
background-size: cover;
}
I want the div to appear like it is blurring the background image of the page. Should work when div position is changed. Consider window resizing.
I was able to come up with a neat solution that requires no js. The technique was to use the same backgroud with specific common settings
JSFIDDLE
HTML:
<div class="mydiv">
<div class='bgblur'></div>
</div>
CSS:
body {
background: url('/etc/bg.jpg') no-repeat center center fixed;
background-size: cover;
}
.bgblur {
background: url('/etc/bg.jpg') no-repeat center center fixed;
background-size: cover;
-webkit-filter: blur(26px);
-moz-filter: blur(26px);
position: absolute;
height: 100%;
width: 100%;
z-index: -1;
}
.mydiv {
position: relative;
overflow: hidden;
// not necessary
border: 2px solid black;
height: 200px;
width: 200px;
}
I have a very large image to use as a background image. Because the image is so large, I have divided it into three images that can be stacked one on top of the other.
I'm putting the images in as background images with the property "cover":
<div class="screen" id="header1"></div>
<div class="screen" id="header2"></div>
<div class="screen" id="header3"></div>
css:
#header1
{
background-color: #000;
width: 100%;
height: 100%;
max-width: 1920px;
max-height: 949px;
background: url('images/bg1_landscape2.png') no-repeat center center;
background-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding: 0;
margin: 0;
}
#header2
{
background-color: #000;
width: 100%;
max-width: 1920px;
height: 100%;
max-height: 947px;
background: url('images/bg2_landscape2.png') no-repeat center center;
background-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;padding: 0;
margin: 0;
}
#header3
{
background-color: #000;
width: 100%;
height: 100%;
max-width: 1920px;
background: url('images/bg3_landscape2.png') no-repeat center center;
background-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding: 0;
margin: 0;
}
The problem is that the pattern in the background image doesn't line up.
How do I make multiple background images line up no matter how wide the screen is?
So... there's a few things going on here with this:
1st question : You haven't done anything to make the div's overlap in your CSS, so they are going to appear just one after the other in the document flow of the browser. For example, view this fiddle here:
div:first-child {
background: red;
}
div {
background: green;
width: 100%;
height: 100%;
}
div:last-child {
background: blue;
}
If you want them to all overlap perfectly, aka to be superimposed, then they need to be positioned absolutely on top of each other, like this:
div:first-child {
background: red;
}
div {
background: green;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
div:last-child {
background: blue;
}
The other question is why you would break a large background image into 3 smaller images. We refer to that as image slicing, which is really not optimal. It takes 3 http requests instead of one to retrieve that image, which is more overhead than just getting the smaller one quite often. Also, it's a background image, so it won't prevent the document from fully loading until the image has loaded, as an inline image would.
Hope this helps.