I have a div with padding on all sides. Inside the div I have a background image. I want the background image to respect the padding (by using background-origin). Why isn't this working?
I want the background image to respect / be inset by the padding (so that the padding is almost like a frame around the image).
.hero_image {
min-height: calc(100vh - 72px);
background-color: rgb(0, 97, 111);
box-sizing: border-box;
padding: 72px;
background-origin: padding-box;
background-image: url("https://s7.postimg.cc/6vtowr3u3/salters_hill_old_logo.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
<div class="hero_image"></div>
JS Fiddle
To get the result you are after you will need to change background-origin: padding-box; to background-origin: content-box;.
This is because the background is positioned relative to the padding box when you use background-origin: padding-box;, as you want to respect the padding you need to position it relative to the content box instead.
html, body {
padding: 0;
}
.hero_image {
min-height: calc(100vh - 72px);
background-color: rgb(0, 97, 111);
box-sizing: border-box;
padding: 72px;
background-origin: content-box;
background-image: url("https://s7.postimg.cc/6vtowr3u3/salters_hill_old_logo.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
<div class="hero_image"></div>
Related
I have been trying to place a transparent color on background image. The background image is working fine but the color is not placing.
I saw that the same question asked before. In my below code, I followed the same suggestion but not working for me.
How can I solve it?
body, html {
height: 100%;
margin: 0;
color:white;
background-image: url("../logo/background/1(2).jpg");
background-color: rgba(255,255,255, 0.5);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
To create an overlay effect, you can use linear-gradient property in background
body,
html {
height: 100%;
margin: 0;
background: linear-gradient(0deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url(https://www.freecodecamp.org/news/content/images/2021/06/w-qjCHPZbeXCQ-unsplash.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
<body></body>
The background image is working fine but the color is not placing.
Yes because your background color is overlapped by background image.
To get a transparent layer over the image use the following code -
CSS
.background {
background:url('..');
position: relative;
}
.layer {
background-color: rgba(248, 247, 216, 0.7);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Also define width and height for background class.
HTML
<div class="background">
<div class="layer">
</div>
</div>
Hey Guys
I am creating a website for class. I just added a small linear gradient to blend from the background-image to the background-color. The background is in defined in the :root so I used :root:before to add the gradient. On a page with enough content, everything works just fine. But on pages with less content, the background-image is small and grows with the quantity of content.
I have no heccing idea why.
The SCSS
:root {
background: $background-color;
/*Absolut verlinktes Bild*/
background-image: url(http://w4.wallls.com/uploads/original/201711/23/wallls.com_163130.jpg);
background-repeat: no-repeat;
background-size: contain;
box-sizing: border-box;
font-size: 1.1rem;
font-family: Montserrat, sans-serif;
scroll-behavior: smooth;
}
:root:before {
content: "";
position: absolute;
bottom: -15%;
width: 100%;
height: 100px;
background: linear-gradient(to top, $background-color, transparent);
}
The culprit isn't the background-image, but the root itself. Because you don't have any content inside it, and the default width & height of root grow with content inside it. You can do the following-
:root {
min-width: 100vw;
min-height: 100vh;
background: $background-color;
/*Absolut verlinktes Bild*/
background-image: url(http://w4.wallls.com/uploads/original/201711/23/wallls.com_163130.jpg);
background-repeat: no-repeat;
background-size: contain;
box-sizing: border-box;
font-size: 1.1rem;
font-family: Montserrat, sans-serif;
scroll-behavior: smooth;
}
:root:before {
content: "";
position: absolute;
bottom: -15%;
width: 100%;
height: 100px;
background: linear-gradient(to top, $background-color, transparent);
}
With the help of Sapinder, I developed this solution. Using min-width and min-height is a heccing good idea. But since the scrollbar must be subtracted from the min-width to work, to prevent x overflow, I had to create a small calculation inside a variable.
Also, I had to change the background-size from "contain" to 100% to always fill the whole background.
I don't know if this is the best or most elegant way to style a background but it works (except for the gradient but that wasn't part of the question.)
New SCSS:
$background-color: #344451;
$scrollbar-width: 5px; /*Only use a variable for this sure to accessibility of the number*/
$background-min-width: calc(100vw-$scrollbar-width); /*Substract the width of the scrollbar from the minimal background width.*/
:root {
min-width: $background-min-width;
min-height: 100vh;
background: $background-color;
/*Absolut verlinktes Bild*/
background-image: url(http://w4.wallls.com/uploads/original/201711/23/wallls.com_163130.jpg);
background-repeat: no-repeat;
background-size: 100%;
box-sizing: border-box;
font-size: 1.1rem;
font-family: Montserrat, sans-serif;
scroll-behavior: smooth;
}
:root:before {
content: "";
position: absolute;
bottom: -15%;
width: 100%;
height: 100px;
background: linear-gradient(to top, $background-color, transparent);
}
I am trying to make a background header image to be responsive. I need it to be 100% of the viewport height or the image height, whichever is smaller.
An example would be the header banner similar to https://brittanychiang.com/v1/
The div size looks correct but the image don't seems to be showing up?
Created a jsfiddle here : https://jsfiddle.net/pnnxm1yf/2/
header {
height: 100vh;
max-height: 850px;
}
#header-banner {
color: #fff;
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url(https://unsplash.com/?photo=gzH1qxPLXtA) center center no-repeat;
background-size: cover;
position: relative;
}
<p>Why is my image not showing up?</p>
<header>
<section id="header-banner">
</section>
</header>
<p>content after image</p>
Add height: 100% to your #header-banner. Its height is 0 atm.
You need to add the height property onto the same element that has the background image.
#header-banner {
height: 100vh;
max-height: 850px;
color: #fff;
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url(https://unsplash.com/?photo=gzH1qxPLXtA) center center no-repeat;
background-size: cover;
position: relative;
}
Adding height to your header-banner will solve the issue.
Plus, please get your image url correct.
#header-banner {
color: #fff;
/* background: #ffffff url(img_tree.png) center center no-repeat; */
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url(https://unsplash.com/?photo=gzH1qxPLXtA) center center no-repeat;
background-size: cover;
/* background-color: red; */
position: relative;
height: 100%;
width: 100%;
}
you did not add the img url properly & if you solve it you will get your output
properly
<!DOCTYPE html>
<html>
<head>
<style>
#borderimg {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
border-image: url(border.png) 30 round;
}
</style>
<p id="borderimg">Here, the middle sections of the image are repeated to create the border.</p>
</body>
</html>
frame
#header-banner {
height: 100%;
color: #fff;
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1502582877126-512f3c5b0a64?dpr=1&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=') center center no-repeat;
background-size: cover;
position: relative;
}
Since I faced an issue with the background image beeing too short for the content at different resolutions, I tried to split the background into 3 parts and stretching the middle one automatically to fill the space between the top and bottom image accordingly. Unfortunately I didn't manage to realize this in CSS. How to do this exactly?
content_background_top.png: 1024 x 68px
content_background_middle.png: 1024 x 6px (Stretched)
content_background_bottom.png: 1024 x 71px
Something like this:
#content{
width: 1024px;
height: 950px;
text-align: center;
padding: 35px 0 35px 0;
background: url(img/content_background_top.png), url(img/content_background_middle.png), url(img/content_background_bottom.png);
background-repeat: no-repeat;
background-size: 1024px 68px, 1024px auto, 1024px 71px;
}
You'll need to specify the background-positions and background sizes. Also note that you'll need to list your larger "middle" background last so that it doesn't cover the others.
#content {
width: 1024px;
height: 950px;
text-align: center;
padding-top: 35px;
background: url(http://i.stack.imgur.com/vNQ2g.png?s=128&g=1), url(http://i.stack.imgur.com/vNQ2g.png?s=128&g=1), url(http://i.stack.imgur.com/vNQ2g.png?s=128&g=1);
background-repeat: no-repeat;
background-position: 0% 0%, 0% 100%, 0% 50%;
background-size: 100px, 100px, cover;
}
<div id="content"></div>
#content{
width: 1024px;
height: 750px;
text-align: center;
padding: 40px 0 40px 0;
background: url(img/content_background_top.png), url(img/content_background_bottom.png), url(img/content_background_middle.png);
background-repeat: no-repeat;
background-position: 0% 0%, 0% 100%, 0% 50%; /* Order: Top, Bottom, Middle */
background-size: 1024px 68px, 1024px 71px, 1024px 100%;
}
I am trying to have a repeating image as my background for a blog I run.
I cannot get the footer to appear.
EDIT: THE CODE PROVIDED HAS THE HEADER, REPEATING IMAGE, AND FOOTER. It was the simplest way to code in the images for the background.
body {
background:#1b0e11;
color:#170d23;
font:11px/18px arial, verdana, helvetica, sans serif;
margin:0px 0px 0px 0px;
padding:0px;
background-image: url(http://i1331.photobucket.com/albums/w595/4V3D15/header_zpsf652d36b.png), url(http://i1331.photobucket.com/albums/w595/4V3D15/middle_zps8a8ab3d1.png), url(http://i1331.photobucket.com/albums/w595/4V3D15/footer2_zpsc6e75bc2.png);
background-repeat: no-repeat, repeat-y, no-repeat;
background-position: center top, center center, center bottom;
}
Just remove/comment this out:
// background-repeat: no-repeat, repeat-y, no-repeat;
Not quite sure where your code is for the footer, can you provide a fiddle?
I fail to see a problem with the code you provided.
My attempt at a footer using your background.
HTML:
<div class="footer">Footer</div>
CSS:
body {
background:#1b0e11;
color:#170d23;
font:11px/18px arial, verdana, helvetica, sans serif;
margin:0px 0px 500px 0px;
padding:0px;
background-image: url(http://i1331.photobucket.com/albums/w595/4V3D15/header_zpsf652d36b.png), url(http://i1331.photobucket.com/albums/w595/4V3D15/middle_zps8a8ab3d1.png), url(http://i1331.photobucket.com/albums/w595/4V3D15/footer2_zpsc6e75bc2.png);
background-repeat: no-repeat, repeat-y, no-repeat;
background-position: center top, center center, center bottom;
}
.footer {
width: 100%;
height: 100px;
outline: 1px solid;
background: #eee;
position: absolute;
bottom: 0;
}
DEMO HERE