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
Related
I would like a dark background with bright text, but the linear gradient and/or filter is making the entire div dark. Is there a way to archive both?
html(reactstrap)
<div class="banner">
<Container>
<div class="banner-text">
<div class="banner-heading">Glad to see you here !</div>
<div class="banner-sub-heading">
Here goes the secondary heading on hero banner
</div>
</div>
</Container>
</div>
css
.banner {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url("../images/page/Front.jpg");
filter: brightness(0.6);
text-align: center;
color: #fff;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.banner-text {
filter: brightness(1.75);
padding: 200px 0 150px 0;
}
.banner-heading {
filter: brightness(1.75);
font-family: "Lobster", cursive;
font-size: 75px;
font-weight: 700;
line-height: 100px;
margin-bottom: 30px;
color: #fff;
}
Yes this is possible; if you remove the alpha channel from the rgba of the banner background; it will remove the opacity that is applied over the top of all the child elements.
Then remove the filter css properties from both banner text and banner heading this will then remove filtering effect on both text elements, leaving the colour to appear as expected. Please see below:
.banner {
background: linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)),
url("../images/page/Front.jpg");
text-align: center;
color: #fff;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.banner-text {
padding: 200px 0 150px 0;
color: white;
}
.banner-heading {
font-family: "Lobster", cursive;
font-size: 75px;
font-weight: 700;
line-height: 100px;
margin-bottom: 30px;
color: #ffff;
}
<div class="banner">
<Container>
<div class="banner-text">
<div class="banner-heading">Glad to see you here !</div>
<div class="banner-sub-heading">
Here goes the secondary heading on hero banner
</div>
</div>
</Container>
</div>
So what I’ve done to lighten my background picture is used
background-color:rgba(255,255,255,0.2);
background-blend-mode: lighten;
Maybe use something similar but to darken in the css of your background and try it for your text as well?
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>
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;
}
I'm trying to use a stock photo to cover my page. For some reason I cannot seem to get this to work. My image just refuses to cover the page.
#cover {
background-image: url("https://i.stack.imgur.com/QE9pP.jpg");
background-size: cover;
background-size: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #464646;
}
.cover-content {
color: hsla(182, 100%, 28%, 1);
font-family: font-family: 'Gravitas One', cursive;
font-size: 400%;
text-align: center;
}
<div id="cover">
<div class="cover-content">
<h1>Snowfall Design Studio</h1>
</div>
</div>
Your page does not cover the whole viewport. If you want an image to cover the whole screen, put the background-image on the html or body element
html {
height: 100%;
}
body {
min-height: 100%;
background-image: url("https://i.stack.imgur.com/QE9pP.jpg");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #464646;
}
.cover-content {
color: hsla(182, 100%, 28%, 1);
font-family: font-family: 'Gravitas One', cursive;
font-size: 400%;
text-align: center;
}
<div id="cover">
<div class="cover-content">
<h1>Snowfall Design Studio</h1>
</div>
</div>
Here is an example of the image covering the whole page: https://codepen.io/anon/pen/owJVgq
You needed to move the background images to the body tag and add a viewport of:
<meta name="viewport" content="width=device-width, initial-scale=1">
If you are looking for this section to be just a section and have more content below the picture, this is what you're looking for: https://codepen.io/anon/pen/BZvbNe
Again you need to add the viewport, but also add:
body {
margin: 0px;
padding: 0px;
}
I do not really understand what happens with some basic HTML/CSS code:
The HTML:
<div class="class1">
<div class="class2">
hello
</div>
</div>
The CSS:
.class1
{
height:300px;
background: url('https://www.planwallpaper.com/static/images/kartandtinki1_photo-wallpapers_02.jpg') center no-repeat;
background-size:100% 100%;
background-attachment:fixed;
padding:60px;
}
.class2
{
background: url('https://www.planwallpaper.com/static/images/i-should-buy-a-boat.jpg') center no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
border-radius: 100px;
line-height:100px;
color:white;
}
I also did a codepen to "show it live", here.
My issue is that I get some strange "black" at the border radius, and I do not know why. Here are some pics:
At the left I get the expected result with IE11, but at the left I get a strange result with Firefox (latest vers.).
My question is, how can I fix this so both browsers show me the result at the left picture (i.e. get rid of the black)?
Thanks!
You can use this code
body {
margin: 0;
padding: 0;
}
.class1 {
height:969px;
background: url('https://d19m59y37dris4.cloudfront.net/directory/1-3/img/photo/photo-1501621965065-c6e1cf6b53e2.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
background-attachment:fixed;
padding:60px;
}
.class2 {
background: url('https://d19m59y37dris4.cloudfront.net/directory/1-3/img/photo/new-york.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
border-radius: 100px;
line-height:100px;
color:white;
}
<div class="class1">
<div class="class2">hello</div>
</div>