I'm trying to add multiple backgrounds this is my web page www.softglobal.com.mx, It has two headers, one with the logo and the other fills the right top, but I want a background that is behind this other two, how can I even do that, this is the CSS
enter code here
This the code
#content-wrap {
background: url (http://i.imgur.com/D4ZVVnY.png);
}
body {
background: url(http://i.imgur.com/K7yy7nB.png) no-repeat #fff;
width: 100%;
display: table;
margin: 0;
padding:0;
}
#templatemo_header {
height: 180px;
background: url(http://i.imgur.com/46t4Zmo.jpg) repeat-x;
background-position: 0 -2px;
margin: 2px 2px 2px 25px;
padding: -3px 0 0 0;
background: url (http://i.imgur.com/D4ZVVnY.png);
}
#ja-cssmenu {
margin:-49px -32px -20px 20px; /* all lists */
padding:0px;
}
##############################
you can using multiple backgrounds just be careful the order in which you use them, see this link for a good reference on how to added them:
http://css-tricks.com/stacking-order-of-multiple-backgrounds/
but the issue here is that the image with the logo has a white background, this will not allow the texture image you have to be seeing, you'll have to change the logo image to a png so is transparent, delete all the white areas, otherwise they will block the texture underneath.
Related
I have tried to code my page as follows:
<div class="Conttent-Group">
<div class="Conttent-Group-Body">
<div class="Conttent-Body-Right">
<div class="Conttent-Body-Left">
<h1>News operations</h1>
</div>
</div>
</div>
</div>
and although the following css:
* {
background-color: #006;
}
.Conttent-Group {
margin-top: 5px;
height: 300px;
width: 788px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: white;
}
.Conttent-Group-Body {
margin-left: 4px;
margin-top: 5px;
width: 386px;
height: 30px;
float: left;
background: url (Image / module-bg-bodynew.jpg) repeat-x top center;
}
.Conttent-Body-Right {
height: 30px;
background: url (image / module-bg-rightnew.jpg) top right no-repeat;
}
.Conttent-Body-Left {
background: url (image / module-bg-leftnew.jpg) top left no-repeat;
height: 30px;
}
.Conttent-Body-Left div {
background: #fff;
border:> 1px solid # C6B389;
border-top: none;
padding: 0;
margin-top: 7 pixels;
height: 243px;
}
.Conttent-Body-Left h1 {
display: block;
margin: 0;
padding: 20px 0 0 7 pixels;
text-align: left;
font-weight: bold;
color: # E1F1FE;
font-size: 13px;
}
But when running my code I only see the background-color
* { background-color: # 006; }
And not the background-images I have set. How can I fix this and show the images?
Currently you are using * {background-color: #006}. The * selector targets every element, thats on your side, thats why every background color is the same.
When you are using an image as background, first of all look up its file path:
/index.html
/style.css
/images/
/images/picture1.jpg
/images/picture2.jpg
If you want to target an picture, you always have to choose the file path regarding to your css file. So in this case for example your path is images/picture1.jpg. Although be aware of uppercase and lowercase letters inside your file structure (like Images or images) or not wanted spaces.
Using this you can set your background-image, and although add multiple variables, like:
background-image: url(images/picture1.jpg); /* no spaces inside your url */
background-repeat: no-repeat; /* or "repeat-x", "repeat-y" */
background-size: cover; /* for a fullscreen background */
background-color: #fff /* for everything your background images does not cover */
/* or combine them all into one */
background: url(images/picture1.jpg) no-repeat top center;
Furthermore you have got quite a lot of errors inside your code. Maybe you should consider refreshing the basics, using online helpers like codeacademy or something else you will find.
I'm trying to have it so that an image of a yellow cog sits inside a div with a yellow border and a white background, and then upon hover the cog changes to white and the background changes to yellow. I'm currently setting the first image as the background of the div, and then using div:hover to change the background on hover, however the spacing etc. doesn't quite work and the border doesn't go around the image properly. Is it possible to have it so the image is inside a link rather than as the background of the div? Here is the code I'm using:
HTML:
<div id="settings">
</div>
CSS:
#settings {
border: 4px solid #ffff00;
padding: 10px 20px 10px 20px;
background: #fff url(img/cog_yellow.png) 0 0 no-repeat;
}
#settings:hover {
background: #ffff00 url(img/cog_white.png) 0 0 no-repeat;
}
Any ideas?
It is possible although not very efficient. You can have two images and show and hide them based on hover:
HTML
<div class="button_link">
<img src="http://www.placecage.com/50/50"/>
<img src="http://www.placecage.com/60/50"/>
</div>
CSS
.button_link a:last-child{
display: none;
}
.button_link:hover a:first-child{
display: none;
}
.button_link:hover a:last-child{
display: block;
}
FIDDLE
If you can post a fiddle recreating the issue with the images you're using there is probably a more efficient way of doing this with just CSS and no additional HTML involved
UPDATE
This is how I would do this, with just CSS:
NEW FIDDLE
You can use this instead:
#settings a{
display:block;
width:100px; /* adjust your width */
height:100px;/* adjust your height */
border: 4px solid #ffff00;
padding: 10px 20px 10px 20px;
background: url(img/cog_yellow.png) 0 0 no-repeat;
}
#settings a:hover {
background: url(img/cog_white.png) 0 0 no-repeat;
}
I just uploaded my first site that I created to a server, but not everything is working. I have a couple of pictures which are inserted using the CSS "background : url() " property but for some reason the pictures aren't showing up. I've tried putting the pictures in different folders and changing paths. The pictures are currently in the main directory so this is how my code looks like:
body {
/*background: linear-gradient(#2c3e50 75%, #ecf0f1 95%);*/
/*background-color: #2c3e50 ; */
/*background-color: #c0392b; */
margin: 0;
padding: 0;
background: url("Elegant_background-3.jpg");
background-size: 100% 100%;
}
#main-container {
/*border: 1px solid black;*/
width: 960px;
height: 445px;
background: url("towncar.png") top center no-repeat;
display: block;
}
Any tips? The pictures were first in a 'pics' folder but I moved them and put them in the main directory
Here's the site: www.bayareasedans.com
Firstly the images will be source from the css relative to the css file (so presently they are being looked for at http://www.bayareasedans.com/css/Elegant_background-3.jpg, check the F12 developer tools), and secondly it appears you are on a Linux server, and case DOES matter, so Elegant_Background-3.jpg (notice with the captial 'B') worked fine for me under http://www.bayareasedans.com/Elegant_Background-3.jpg.
towncar.png works fine, no case issue assuming you get the path correct of http://www.bayareasedans.com/towncar.png as presently it is looking for it at http://www.bayareasedans.com/css/towncar.png
so changes required to the css are (assuming you do not move the image files form the root)
body {
/*background: linear-gradient(#2c3e50 75%, #ecf0f1 95%);*/
/*background-color: #2c3e50 ; */
/*background-color: #c0392b; */
margin: 0;
padding: 0;
background: url("/Elegant_Background-3.jpg"); /** Here **/
background-size: 100% 100%;
}
#main-container {
/*border: 1px solid black;*/
width: 960px;
height: 445px;
background: url("/towncar.png") top center no-repeat; /** and Here **/
display: block;
}
Relative URLs in CSS are relative to the location of the CSS file.
So for example if you're targetting a file in the root folder, from a css file in the css/ folder, then use:
url("../towncar.png")
I'm trying to make a button using three background images so that we can pull in translations for the the text of the button and expand nicely. We'll probably add a base style for IE8 but our designer wants us to use this style and we couldn't recreate it nicely with pure CSS3.
Here are the images:
Here's the HTML (just a simple button, but thought I should put it anyway:
<button class="back clickable" aria-label="Back" onclick="javascript:history.back();">Back</button>
I've already tried a couple of things; I'll paste the CSS of both attempts.
Attempt 1: Using Pseudo-selectors
http://jsfiddle.net/c2B6X/
.back {
background: url("images/back-middle.png") 14px 0 repeat-x;
color: $white;
height: 28px;
padding: 5px;
&:before {
background: url("images/back-front.png") 0 0 no-repeat;
width: 14px;
}
&:after {
background: url("images/back-end.png") 100% 0 no-repeat;
width: 8px;
}
}
Attempt 2: Three background-images
http://jsfiddle.net/nPUQN/
.back {
background: none;
background-image: url("images/back-middle.png"), url("images/back-end.png"), url("images/back-front.png");
background-position: 14px 0, 100% 0, 0 0;
background-repeat: repeat-x, no-repeat, no-repeat;
border-right: 8px transparent;
border-left: 14px transparent;
color: $white;
height: 28px;
padding: 5px;
}
If it looks like atypical CSS that's because we're using SASS.
Is there something obvious I'm missing or doing wrong? Any advice on how to make this work would be greatly appreciated.
EDIT
Since I got so many answers that "work", I'll mark correct the answer that works best in Chrome, FF and IE9.
EDIT 2
I've tried all answers and none work in IE9. We have to support IE9 (and IE8, but I won't even go there for now). I'm going to start a bounty. Anyone who can supply an answer that works for IE9, Firefox and Chrome gets it.
Pseudo-content requires content, so you'll first need to specify that:
.selector::before {
content: ' ';
}
Then to define any layout such as width and height you'll need to display the pseudo elements as a block or inline-block. Block layout will force each pseudo element to wrap and inline-block will sit on the line so you'll either have to use floats or absolute positioning.
.selector {
position: relative;
height: 28px;
/* allow for the pseudo-elements which do not have layout due to absolute positioning */
margin: 0 15px;
}
.selector::before,
.selector::after {
content: ' ';
position: absolute;
top: 0;
width: 15px;
height: 28px;
}
.selector::before {
left: -15px;
}
.selector::after {
right: -15px;
}
Demo here for you: http://codepen.io/anon/pen/yaJGI
You'll need to add content for :before and :after to show. After that, you can position them absolutely and by giving them right: 100% and left: 100% respectively, you can position them in front of and behind the button.
button {
background:transparent;
border: none;
padding: 0;
margin: 0;
line-height: 1;
font-size: 12px;
cursor: pointer;
margin-left: 14px; /* width of :before */
}
.back {
background: url("http://i.stack.imgur.com/DaQcG.png") 14px 0 repeat-x;
color: white;
height: 28px;
padding: 5px;
position: relative;
}
.back:before {
position: absolute;
content: "";
height: 28px;
top: 0;
right: 100%;
background: url("http://i.stack.imgur.com/6m2HC.png") 0 0 no-repeat;
width: 14px;
}
.back:after {
position: absolute;
content: "";
height: 28px;
top: 0;
left: 100%;
background: url("http://i.stack.imgur.com/2WA5B.png") 100% 0 no-repeat;
width: 8px;
}
The definitions of before and after are slightly the same, so you could write it down more compactly, but you need to re-sass it anyway. ;)
http://jsfiddle.net/c2B6X/
Tip: Note that downloading three images is less efficient. You can create one image that contains the start and end at the top, and the middle part at the bottom. By positioning the background, you can show the right part inside the elements. This technique is called sprites and it decreases the number of requests to make.
I came up with a little something that you can take a look at. You can modify it to best fit your needs.
http://jsfiddle.net/Xy7Hv/1/
HTML:
<button class="back">Back</button>
CSS:
.back {
border: none;
height: 28px;
padding-right: 8px;
padding-left: 14px;
background-image: url("http://i.stack.imgur.com/DaQcG.png"),
url("http://i.stack.imgur.com/6m2HC.png"),
url("http://i.stack.imgur.com/2WA5B.png");
background-position: 14px 0px, left, right;
background-size: 30px 100%, 14px 28px, 8px 28px;
background-repeat: no-repeat,no-repeat,no-repeat;
}
("background-size: 30px" is the width of the button, so if all your buttons are the same size it shouldn't be a problem)
with your multiple background version, you could add gradient or white image to build your button bg , keeping some space with padding.
http://jsfiddle.net/nPUQN/1/
.back {
background:
url("http://i.stack.imgur.com/2WA5B.png") 100% 0 no-repeat ,
url("http://i.stack.imgur.com/6m2HC.png") 0 0 no-repeat,
-webkit-linear-gradient(0deg, white 0, white 14px , transparent 14px ,transparent) 0 0 no-repeat ,
-webkit-linear-gradient(180deg, white 0, white 8px , transparent 8px ,transparent) 0 0 no-repeat ,
url("http://i.stack.imgur.com/DaQcG.png") 14px 0 repeat
;
color: $white;
height: 28px;
padding: 5px 8px 5px 14px;
}
prefixed for chrome, add other prefix needed or use a prefix js :)
I add this answer because i like to keep the other as it is.
This one is to be tested in IE8/9 with pseudo and position:
http://codepen.io/gcyrillus/full/lBpaI or to edit :
http://codepen.io/gcyrillus/pen/lBpaI
.back {
background:
url("http://i.stack.imgur.com/DaQcG.png") 14px 0 repeat
;
color: white;
height: 28px;
padding: 5px;
position:relative;
overflow:visible;
}
.back:before {
content:url(http://i.stack.imgur.com/6m2HC.png);
top:0;
left:-14px;
position:absolute;
}
.back:after {
content:url(http://i.stack.imgur.com/2WA5B.png);
position:absolute;
right:-8px;
top:0;
}
I used this code today. It's similar to your 2nd example, but uses the background shortcut property and a mixture of position strings.
background: url("../images/img01.png") 0px 0px no-repeat, url("../images/img02.png") 53px 0px repeat-x, url("../images/img03.png") right top no-repeat;
img01 = left image (53px wide)
img02 = fill image
img03 = right image
Can anyone help me to implement transparent square fluid with bootstrap?(https://twitter.com/ladygaga)
also I'd like to know how to implement rounded square in that transparent square.
Thanks in advance!!
It seems they're just using a semitransparent background image on that div to get the glassy texture. The image or background-color(such as RGBA(0,0,0,0.2)) would need to have it's alpha channel set to something other than 100%. Their CSS looks like this.
.wrapper, .wrapper-narrow, .wrapper-permalink {
position: relative;
width: 837px;
min-height: 100%;
padding: 54px 14px 15px;
margin: 0 auto;
background: url(../img/wash-white-30.png);
}
Assuming you were going to use a similar approach. With a 'wrapper' class providing the transparent background, and a 'whitebg' class providing the solid white background:
<div class="container-fluid wrapper">
<div class="row">
<div class="span2 well whitebg">
content..
</div>
</div>
</div>
with this CSS to give you what you need for your class:
.whitebg {
background-color:white;
}
The transparent DIV (not square :)) is implemented with a PNG image that has an alpha channel, as follows:
.wrapper, .wrapper-narrow, .wrapper-permalink {
background: url("../img/wash-white-30.png") repeat scroll 0 0 transparent;
margin: 0 auto;
min-height: 100%;
padding: 54px 14px 15px;
position: relative;
width: 837px;
}
As far as rounded corners are concerned, on that page, they are implemented as follows:
.module, .promptbird {
background-clip: padding-box;
border-radius: 6px 6px 6px 6px;
line-height: 16px;
margin-bottom: 10px;
position: relative;
}
For your requirements in bootstap, merely using the css opacity property for your div, and the border radius property for your inner divs will do the trick.
.transparentDiv { /*make any SQUARE transparent!*/
background: #fff; /*white*/
opacity: 0.5 /*will not work in older IE versions, add filter for it!*/
margin: 0 auto; /* optionally, center it! */
}
.roundedDiv {
border-radius: 3px 3px 3px 3px; /* 3px looks way cool! */
}
usage:
<div class="transparentDiv">I see through you baby!</div>
<div class="roundedDiv ">Love makes the world go round!</div>
Use a transparent color for your background-color using an rgba color value. That's how you get the transparency.
For the rounded corners, make it easy by using border-radius.
Here's a fiddle containing all the stuff you want - http://tinkerbin.com/j5A3fKHl