I would like to include the repeated background image that is on my background to my navigation bar as well.
#navigation-top, #navigation-bottom {
background-color: #fff;
width: 100%;
}
http://www.sanisportwest.com/
The problem on your site is that "image.jpg" does not exist.
#navigation-top, #navigation-bottom {
background: #fff url('path/to/image.jpg') repeat;
width: 100%;
}
If you only want it to repeat left to right (and not up and down), use repeat-x.
You can use repeat-x or repeat-y, depending on the orientation of your image and Nav bar. Assuming your Nav bar is horizontal:
#navigation-top, #navigation-bottom {
width: 100%;
background: url(images/background_image.gif) repeat-x;
}
background: #ffffff url("yourimg") repeat-x;
Copy all of the background related CSS from #canvas-wrapper and paste it into #navigation-top, #navigation-bottom.
Related
I want to create a background with repeated image using CSS
background: url(../images/bg.PNG) repeat;
The problem is that the images are very close to each other, how can I add a padding for every image?
html {
background: white;
}
body {
width: 639px;
height: 280px;
background: url(//www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=64&d=identicon&r=PG) silver;
background-repeat: space;
border: 1px dotted red;
margin: auto;
}
Don't think this is possible, can't you add a transparent space in bg.PNG ?
You cannot have spaces between the background images. But you can modify your image to have the spaces you want.
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.
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 text links that I am trying to use a background image with on rollover (link.gif is transparent, linkhover.gif is the rollover image).
The code I have below is working except the positioning is not.
.navlink {
background:transparent url('graphics/link.gif') center top no-repeat;
height:70px;}
.navlink:hover {
background-image: url('graphics/linkhover.gif');}
Try making the background take up the full size, like this
.navlink {
background: url('graphics/link.gif');
height:70px;
}
.navlink:hover {
background: url('graphics/linkhover.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
}
Demo
If you have a parent element around .navlink, then you can just put height:100% and remove height:70px; and it will stay proportional. If you want to disregard proportion and just have it fill the parent you can put both height:100% and width:100%
EDIT
Since I found out the navlinks are all <a>: you can't have background-attachment: fixed because it makes the parent's background change instead of the navlink's (for what reason I don't know)
Updated code
.navlink {
text-align:center;
background: url('graphics/link.gif');
background-repeat: no-repeat; /* This applies to :hover as well */
background-position: center; /* This applies to :hover as well */
text-decoration: none; /* To remove the underline */
}
.navlink:hover {
background: url('graphics/linkhover.gif');
}
Updated demo based on the structure of your site which you provided in the comments
Next time when writing your question you should include the relevant HTML, that would have made it much easier to help you with the problem
EDIT 2
After some playing I believe I got your site the way you want it using this:
.navlink {
padding-top:30px;
text-align:center;
background: url('graphics/link.gif');
text-decoration: none;
}
.navlink:hover {
background: url('graphics/linkhover.gif');
background-position: center -55px;
background-repeat:repeat-y;/*This is optional, taking it out makes it repeat*/
text-decoration: none;
}
You should make a sprite, put the images next to each other in one file and adjust the background-position on :hover. The CSS should be like this:
.navlink {
background-image: url('image');
background-position: top left;
}
.navlink:hover {
background-position: top right;
}
You can achieve a cool effect when adding an CSS3 transition.
The image will then slide to the rollover state!
I am doing some research for a ruby on rails web app I am working on and need some help with a few questions.
Is it possible to render/display images as the background of a web page using a masonry jquery type pluggin?
If the answer to the 1st question is no, then is is possible to manually render multiple images as a background using css(3) and html(5)?
Lastly, if I can use 1, 2 or any other method to display multiple background images, will I be able to apply regular css code to manipulate the images?
Thanks in advance for the help.
It is possible with CSS3. At it's most simplest, here is an example of how you would achieve it:
#exampleA {
width: 500px;
height: 250px;
background-image: url(decoration.png), url(ribbon.png), url(old_paper.jpg);
background-repeat: no-repeat;
background-position: left top, right bottom, left top;
}
The order runs from first (on the left) being the top layer to the last (on the right) being the bottom background layer (that's if you're layering them).
EDIT: In order to apply more complicated stylings to each background image such as greyscale you need to break up the CSS into this sort of format:
/* this is the master css block - the height and width here represent the total coverage for all child background images */
.sample1 .sea, .sample1 .mermaid, .sample1 .fishing {
height: 300px;
width: 480px;
position: relative;
}
/* individual stylings for each background image featured - apply greyscale and separate width and heights here */
.sample1 .sea {
background: url(media/sea.png) repeat-x top left;
}
.sample1 .mermaid {
background: url(media/mermaid.svg) repeat-x bottom left;
}
.sample1 .fish {
background: url(media/fish.svg) no-repeat;
height: 70px;
width: 100px;
left: 30px;
top: 90px;
position: absolute;
}
.sample1 .fishing {
background: url(media/fishing.svg) no-repeat top right 10px;
}