On my website I have included a background (on the contact page). However when I put in the background it does not cover the header. It has done it on the main page but not on the contact page? I have tried to use
#siteWrapper{
background-image: url("http://static.squarespace.com/static/545d45afe4b08eea0ac65e7a/t/54612b8ae4b0ca233d43bdee/1415654282657/Website%20Background%20Trees.png");
background-repeat: no-repeat;
background-size: 100%;
}
So here, it puts the background in and it fits it to the screen with background-size: 100%; but this has only put it over the content. I have tried to put the background on the body however that has put it behind the content. So the main goal is to try and include the background into the header as well as the content (like the home page). - Thanks
Try setting the background image on the #site element instead.
Solution #1:
You're using position: relative for your header on your Contact page, but absolute on your main page.
Use this CSS for all page but homepage:
header {
position: absolute;
top: 0;
left: 0;
background: none;
}
#siteWrapper {
padding-top: 106px; /* leave some space for header */
}
Solution #2:
Move your background image on #site, and remove black backgrounds:
#site {
position: relative;
background-image: url("http://static.squarespace.com/static/545d45afe4b08eea0ac65e7a/t/54612b8ae4b0ca233d43bdee/1415654282657/Website%20Background%20Trees.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
header,
#siteWrapper {
background: none;
}
Sidenotes:
Be careful, the Submit button may appears exactly where there's a lightning area in your background image, making it unreadable:
CSS changes:
//Change this #site css to
#site {
background: url("http://static.squarespace.com/static/545d45afe4b08eea0ac65e7a/t/54612b8ae4b0ca233d43bdee/1415654282657/Website%20Background%20Trees.png") repeat scroll 0 0 / cover rgba(0, 0, 0, 0);
position: relative;
}
//Remove this below class css
.collection-545e428fe4b0f79db6910e91 #siteWrapper {
background-image: url("http://static.squarespace.com/static/545d45afe4b08eea0ac65e7a/t/54612b8ae4b0ca233d43bdee/1415654282657/Website%20Background%20Trees.png");
background-repeat: no-repeat;
background-size: 100% auto;
}
//remover background-color css in below two section "background-color: #100806"
siteWrapper{background-color: #100806;}
body.transparent-header:not(.has-banner-image) #header{ background-color: #100806;}
#site{
background-image: url("http://static.squarespace.com/static/545d45afe4b08eea0ac65e7a/t/54612b8ae4b0ca233d43bdee/1415654282657/Website%20Background%20Trees.png");
background-repeat: no-repeat;
background-size: 100%;
}
Remove header from:
body.transparent-header:not(.has-banner-image) #header {
background-color: #100806;
position: relative;
} //site.css line 10
Related
I'm setting up a site, and want to create a responsive background image but I'm getting only single line with background image. What property should i need to use to make the entire background image to fit?
I created 2 files,
index.html :
<div id="logo">Test</div>
style.css :
#logo {
background-image: url("bg.png");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
I tried many times but only single line gets background image. I want the background image to be fully displayed on screen without using height property which i think makes site less responsive.
you should change the height of logo div and set it as full height by adding height:100% for the body and logo div, your code should look like below code
html, body
{
height: 100%;
}
#logo {
background-image: url("bg.png");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height:100%;
}
If you want the image to have the same height as the screen you can use height:100vh. But if you want only the image full size you can do this like this :
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#image{
max-height: 100%;
max-width: 100%;
}
#text{
position: absolute;
color: white;
top: 0
}
<img id="image" src="https://images.unsplash.com/photo-1528920304568-7aa06b3dda8b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80">
<div id="text">test</div>
As the title says, the issue arises only when viewed on mobile.
On my pc it looks exactly as desired but when I open it up on a mobile device there is a blank space between the background image and the footer?
Site is live #
https://claritysalonspa.com
Any help would be appreciated!
I am not sure how you are adding the background image in the backend, but try adding the following style. In here, .page-id-29 is the class added to the current page, and you added a background image to it.
.page-id-29 {
background-image: url(YOUR-IMAGE);
background-size: cover;
background-repeat: no-repeat;
height: 100vh; // add the height
background-position: 50% 50%; // center the image
}
so the solution is to add height: 100vh and also change the image position so it is centered.
Add this in your style.css
#media screen and (max-width:600px){
.page-id-29{height: 95vh;}
}
It's because your bodydoesn't have enough content. If you add more content then there is no trick needed.
You can overcome this by adding min-height to your body tag.
.page-id-29 {
background-image: url(https://claritysalonspa.com/wp-content/uploads/2018/03/IMG_5215.jpg);
background-size: cover;
background-repeat: no-repeat;
min-height: 92vh; /* this for height */
background-position: center center; /* to center the image */
}
If you want to make your footer always bottom of the viewport please add thi also.
footer {
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
padding: 0 !important;
}
So at the moment, I've got a div behind a link, I've set the div background to be a specific image, and I'd like the same image to appear when hovering over that div but a shadow appears around the inside of the box, I have both images with me, but I can't seem to find a way to keep the "Home" background image the same as the "Home:hover" background image but with the shadow box too, I'd like to do this without having to individually place the shadow onto the background image in photoshop.. any thoughts?
Here's the CSS:
#Home {
z-index: 4;
position: absolute;
top: 0px;
left: 707px;
width: 95px;
height: 64px;
margin: 0;
background: url(../images/button%20texture%20b.jpg) center;
border-style: solid;
border-width: 1px;
border-color: #7F7F7F;
}
#Home:hover {
width:95px;
background: url(../images/button%20overlay%20b.png) ;
background-size: cover;
}
.
#Home:hover {
width: 95px;
background: url(../images/button%20overlay%20b.png) center, url(../images/button%20texture%20b.jpg) ;
background-size: cover;
}
Thanks!
I would recommend using this code:
#Home:hover { background:url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left; }
As you can read here, you can actually assign multiple background images to an element. The first image stated will be on top, the second below the first image and so on.
http://html5up.net/big-picture
The overlay.png does make my background brighter. But I do not want to deleted it unless I understand what this png does. Do you guys have a clue?
The overlay.png is used here:
#intro {
background: url('images/overlay.png'), url('../images/intro.jpg');
background-size: 256px 256px cover;
background-attachment: fixed, fixed;
background-position: top left, top center;
background-repeat: repeat, no-repeat;
color: #c2b090;
}
.image:before
{
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url('images/overlay.png');
}
It's making your background image lighter. overlay.png is a partially transparent blue-ish graphic that overlays intro.jpg. It's set as the first background image of your main section tags. If you delete it, your big images will not be washed out, but it will result in a failed HTTP request because your CSS is still referencing it. If you want to delete the image, you should remove reference to it in your style.css file if you can.
I have a Joomla site that i have created a custom theme. The site is http://esn.teipir.gr/.
I have two images right and left that i want them to have background image fixed.
I use the following CSS rules
div.backgroundboxleft {
background-attachment: fixed;
background-image: url("/images/back_1.png");
float: left;
height: 822px;
top: 40px;
width: 457px;
}
and
div.backgroundboxright {
background-attachment: fixed;
background-image: url("/images/back_2.png");
float: right;
height: 822px;
top: 40px;
width: 457px;
}
If i remove the background-attachment all is OK with the images but when i add with firebug the following code everything messes up.Can you help me making the pages stay fixed without the background color being on top of the image?
Thanks
When you set background-attachment:fixed it fixes the background in relation to the window. So you would then need to adjust the background-position of your images so they appear in the right place. If you replace your backgroundproperties with the css below it will line up properly.
div.backgroundboxleft {
background-image: url("/images/back_1.png");
background-attachment: fixed;
background-position: 0 44px;
background-repeat: no-repeat;
}
div.backgroundboxright {
background-image: url("/images/back_2.png");
background-attachment: fixed;
background-position: 1323px 44px;
background-repeat: no-repeat;
}
Live example: http://jsfiddle.net/tw16/6fZ96/embedded/result/
To clarify background-attachment:fixed stops the background from scrolling with the window. So if your viewport is too small and you have to scroll horizontally or vertically the background will not move (i.e. it will be overlapped). More information can be found here.