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.
Related
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;
}
I have the below code and I'm trying to add an attribute to center the background but it's not working.
Existing Code:
<div class="av-section-color-overlay" style="opacity: 1; background-color: #000000; background-image: url(http://andytraph.com/wp-content/uploads/2015/08/avatar.jpg); background-repeat: repeat;"></div>
Existing CSS:
opacity: 1;
background-color: #000;
background-image: url("http://andytraph.com/wp-content/uploads/2015/08/avatar.jpg");
background-repeat: repeat;
}
The CSS I tried to add is:
.av-section-color-overlay {
background-position: center center !important;
}
The website is http://andytraph.com/ and I'm trying to center the full-screen Avatar image
I would suggest not repeating the background, but letter-boxing it in the container, which looks way better. Center works:
{
opacity: 1;
background-color: #000000;
background-image: url(http://andytraph.com/wp-content/uploads/2015/08/avatar.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
There are a few competing problems here:
There is no content inside the element you are working with, so the background image is getting clipped as a result.
The background image is very large, so it is difficult to see the desired centering without either 1) setting the DIV element to a relatively larger height / width, or setting the background-size CSS property.
The concepts of background-repeat: repeat and background-position: center constitute competing desires. You can't really both center an image, and tile it indefinitely in both directions.
So in light of the above, if you apply a few further style modifications, you get your desired behavior with what you specified: background-position: center. (If you want to center in both directions, you don't need to expressly state it twice -- it is implied that you want to use it in both directions if there is only a single value.)
Something like:
.av-section-color-overlay {
background-color: #000;
background-image: url("http://andytraph.com/wp-content/uploads/2015/08/avatar.jpg");
background-repeat: no-repeat;
background-size: 100px;
background-position: center;
height: 200px;
width: 200px;
}
and:
<div class="av-section-color-overlay"></div>
Example: https://jsfiddle.net/7mpqfd22/2/
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
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.
I have a table that gets sorted. The headers have background images (arrows) to show the sorting direction.
The current CSS uses 3 different images like this:
th {
padding-right: 21px;
}
th.sorting {
background: #EEEEEC url("table-sort.png") no-repeat center right;
}
th.sorting_asc {
background: #ECE0EB url("table-sort-asc.png") no-repeat center right;
}
th.sorting_desc {
background: #ECE0EB url("table-sort-desc.png") no-repeat center right;
}
Working example in the JSfiddle here.
Is there a way to reduce these to one image and use CSS sprites? The problem is that a merged image cannot simply be used as a background to the header cell, because multiple images may become visible at once, like here.
I'd like to avoid using extra elements if possible. IE7 support would be great but I could probably live without it.
Pseudo elements like :after could work, but I can't find a way to position the icons in the same way. JSfiddle example.
I figured out a way for pseudo elements to work. Set the table headers as position: relative, then something like this:
.sorting:before {
display: block;
content: "";
position: absolute;
top: 50%;
right: 8px;
width: 7px;
height: 9px;
margin-top:-4px;
background: transparent url("http://i.imgur.com/iONZm.png") 0 0;
}
The icon is positioned 50% from the top, then moved upward a few pixels to be vertically centered.
You can use SpriteMe to generate sprite images on your site.
.sorting_asc {
background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/5b6b9013a6/spriteme1.png);
background-position: 32px 0px;
}
.sorting {
background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/5b6b9013a6/spriteme1.png);
background-position: 32px -27px;
}
.sorting_desc {
background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/5b6b9013a6/spriteme1.png);
background-position: 32px -53px;
}
A quick Google search for a CSS sprite generator comes up with a few options. Though I've never used any of these services myself, I have usually made a single PNG image with transparency. Then you would reference your CSS like this:
th {
padding-right: 21px;
background: #EEEEEC url("table-sort.png") no-repeat center right;
}
th.sorting {
background-position: -100px -100px;
}
th.sorting_asc {
background-position: -200px -200px;
}
th.sorting_desc {
background-position: -300px -300px;
}
Replace the background-position property values with the appropriate coordinates. I think the CSS sprite services can create these values for you based on their compression once it is done, but the CSS coordinates may need some tweaks to get it exactly how you want.