As per other SO solutions, I have tried giving explicit fixed dimensions to the pseudo element (height: X px; width: X px;) but even if this worked, I want a scaleable, responsive image which fits its parent element, so hence fixed dimensions are not acceptable to me. How can I get the background-image to show up and be automatically scaleable at the same time?
HTML:
<h3>This is a title</h3>
CSS:
h3:before{
background-image:url('https://store.ashenglowgaming.com/wp-content/uploads/2018/02/cropped-agg-store-logo-4-FULLSIZE-1.jpg');
background-size: contain;
background-repeat: no-repeat;
display: block;
}
Try this
h3:before{
background-image: url(https://store.ashenglowgaming.com/wp-content/uploads/2018/02/cropped-agg-store-logo-4-FULLSIZE-1.jpg);
background-size: contain;
background-repeat: no-repeat;
content: '';
height: 110px;
display: block;
}
try adding these styles to your pseudo element
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
I have added content: ''; and specified a height and also min-width for the pseudo element.
h3:before {
content: '';
background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTMdl8cg3CDenBgBdDey8W2KUfDIfKO7ZcPk6c5KtuLn8OJBzu8');
background-size: contain;
background-repeat: no-repeat;
display: block;
min-width: 150px;
height: 40px;
}
<h3>
This is a title
</h3>
You can use background in h3 itself and use background-size to adjust the size.
Stack Snippet
h3 {
background-image: url(https://store.ashenglowgaming.com/wp-content/uploads/2018/02/cropped-agg-store-logo-4-FULLSIZE-1.jpg);
background-size: auto 40px;
background-repeat: no-repeat;
display: block;
padding-top: 40px;
}
<div class="wrapper">
<h3>This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title</h3>
</div>
Related
I'm trying to make the background-image of a parent stretched to a pseudo element.
I'm currently using the code below and it works in a sense that it's using the same image but the placement is not correct (see screenshot). I'd like this to be seamless.
.parent {
position: relative;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.parent::after {
content: '';
position: absolute;
bottom: -15px;
left: 0;
width: 100%;
height: 15px;
background: inherit;
z-index: 1;
}
Setting the parent's background-attachement to fixed seems to make it work but then I get an unwanted parallax effect on the parent.
Is there a way to make this work in a way that allows me to stretch the background image but avoid parallax? All help much appreciated!
Make the pseudo element cover the whole element and only its background will be visible:
.parent {
position: relative;
background-image:url(https://picsum.photos/id/1018/800/800);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position:relative;
z-index:0;
height:100px;
}
.parent::after {
content: '';
position: absolute;
z-index:-1;
bottom: -15px;
left: 0;
width: 100%;
top:0;
background: inherit;
z-index: -1;
}
<div class="parent">
</div>
I know there are questions similar to this one, but none of them worked for me.
I have a div class with a background image:
#index-box{
border-radius: 20px;
background: url('/static/images/bg.png') no-repeat;
background-size: cover;
}
Is there any way to make the #index-box div class so high, that the whole background image fits in?
If you know the aspect ratio of the image you can put all in a container with percentage padding and relative position. then another box full width and height with absolute position for the content. For the below image the original size of the image is 1280X720, so the ratio height/width 0.5625:
#background {
position: relative;
padding-bottom: 56.25%;
background-image: url('https://i.ytimg.com/vi/MPV2METPeJU/maxresdefault.jpg');
background-size: cover;
}
#content{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
<div id="background">
<div id="content">some content<div>
</div>
Also, with similar way you always can use the image as an img element. so you even not need to know the aspect-ratio. like that:
#container {
position: relative;
}
#bg {
width: 100%;
display: block;
}
#content{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
<div id="container">
<img id="bg" src="https://i.ytimg.com/vi/MPV2METPeJU/maxresdefault.jpg"/>
<div id="content">some content</div>
</div>
try to apply this code:
#index-box{
border-radius: 20px;
background: url('/static/images/bg.png') no-repeat;
background-size: cover;
object-fit:cover;
}
or
body{
margin:0;
width:100%;
}
#index-box{
height:100%;
border-radius: 20px;
background: url('/static/images/bg.png') no-repeat;
background-size: cover;
background-position:center;
}
I am trying to find a way to put a nav bar behind some background images that repeat. Here it is:
Basically, I want to have a navigation bar behind the repeating plants image, but in front of the sun image. I am going to make the nav elements popup when they are hovered over. Here is my css for the header:
header {
height: 250px;
width: 100%;
background-image: url("top.png"), url("banner.png");
background-repeat: repeat-x, no-repeat;
background-size: auto 40px, cover;
background-position: bottom;
}
I would recommend z-index. From W3Schools:
"The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order."
The larger the z-index of an element, the closer to the front the element is.
Part of the solution was to use z-index as Howzieky mentioned but did not provide an example for. Here is how I did it:
css:
header {
height: 250px;
width: 100%;
position: relative;
}
#background-far {
height: 250px;
width: 100%;
background-image: url("banner.png");
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
#header-body {
height: 250px;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
#background-close {
height: 250px;
width: 100%;
background-image: url("top.png");
background-repeat: repeat-x;
background-size: auto 40px;
background-position: bottom;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
html:
<header>
<div id="background-far"></div>
<div id="header-body">
<img src="logo.png"/>
</div>
<div id="background-close"></div>
</header>
I also needed split the header into 3 sections (background-far, header-body and background-close). Header body will store everything I will have in the header such as my nav bar. The important part was to make the header use position: relative and each section to use position: absolute; top: 0; left: 0;
Thanks for all your help everyone!
I have a webpage with an background-image with background-size:cover.
Now I want to overlay this background-image with certain div's, which contain additional informations. These div's have to be at an exact position relative to the background image, even though I resize the broswer window.
That's just one attempt that didn't work.
HTML
<body>
<div class="icon">
<div class="background picture_rendering"></div>
</body>
CSS
.background {
width:100%;
height:100%;
background-image: url(images/bg.jpg);
background-size: cover;
z-index: 0;
position: absolute;
}
.icon {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: relative;
background-image: url('/images/icon.jpg');
background-size: 5% auto;
background-position: 227px center;
background-attachment: fixed;
}
It should be something like the map-tag: http://www.w3schools.com/tags/tag_map.asp But instead of links there should be icons.
I hope you understand :-)
Best regards,
The One
Basically you can create a parent or wrapper element which would have the background image and then place all the elements like icons etc inside this and do all your positioning etc. So I've created this for you:
CSS
.container {
background: url(http://www.w3schools.com/tags/planets.gif) no-repeat;
width: 145px;
height: 126px;
position: relative;
}
.icon {
position: absolute;
width: 30px;
height: 30px;
border-radius: 100%;
z-index: 2;
}
.icon1 {
background: green;
top: 20%;
right: 10%;
}
.icon2 {
background: red;
bottom: 10%;
left: 10%;
}
HTML
<div class="container">
<div class="icon icon1"></div>
<div class="icon icon2"></div>
</div>
Here is an example on jsFiddle http://jsfiddle.net/j5cgt22z/
So each icon is positioned inside the container, the planets need to use position:absolute to float them around in the container space but the container needs to have position:relative so they are positioned in relation to their parent http://css-tricks.com/absolute-positioning-inside-relative-positioning/
You can then use z-index on each position:absolute icon to stack each icon so the higher the z-index higher up the stack.
Hope this helps
After realising that there is no general solution for the problem yet. (object-fit isn't widely support).
I used the jquery-Plugin imagefill.js.
CSS
.background {
width:100%;
height:100%;
top: 0;
left: 0;
background-image: url(http://connect.homes.com/wp-content/uploads/2012/05/200392710-0012.jpg);
background-size: cover;
z-index: 0;
position: absolute;
background-position: center center;
}
.container_icons
{
position: absolute;
height: 100%;
width: 100%;
}
.test
{
position: absolute;
background-image: url('http://www.clipartbest.com/cliparts/ncX/qyL/ncXqyLdcB.png');
background-size: 70px auto;
background-repeat: no-repeat;
background-position: 17% 49%;
}
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/2.1.0/jquery.imagesloaded.min.js"></script>
<script src="http://johnpolacek.github.io/imagefill.js/js/jquery-imagefill.js"></script>
<div class="background"></div>
<div class="container_icons"><img class="test" src="http://upload.wikimedia.org/wikipedia/commons/8/8c/Transparent.png" width="3869px" height="2574px" /></div>
<script>
$('.container_icons').imagefill();
</script>
Here is a jsfiddle --> It doesn't work as good as on my webpage ;-)
I have two divs. First acts as a banner of sorts. The next is just a small div that I'm trying to place directly below the first div. I've tried taking away float and adding clear: both. Perhaps I'm missing something? Below is my html and css
<div id="background">
</div>
<div id="us">
</div>
#background
{
width: 100%;
height: 10%;
position: absolute;
left: 0px;
top: 0px;
border:1px solid #000;
background-color:black;
background-image: url(resources/images/****.png);
background-repeat: no-repeat;
background-position: center;
clear: both;
}
#us
{
display: block;
width: 165px;
height: 200px;
left: 0px;
align-top: auto;
position: absolute;
background-image: url(resources/images/*****.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
The first div does appear at the top of the page and displays correctly. The second one appears over top of the first div. Any advice?
Check this out.
Fiddle
Just add top:10%; to your #us because you are using position:absolute.
The size of your top in #us must be the same size with your height in #background. I also added box-sizing:border-box; for you borders not to take space.
try this one
#us
{display: block;
width: 165px;
height: 200px;
left: 0px;
align-top: auto;
**margin-top: 50px;**
background-image: url(resources/images/*****.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
You have used position: absolute; in CSS of second div(#us) that's why it is showing on top of first div. Change that to position: relative; or delete that line.
And you are ready to go.