I have 2 images. One image (through background-url) with position relative is the main image and another image (through background-url) with position absolute is placed above the first image.
when i shrink the browser the 2nd image doesn't follow responsiveness. Is there a way to do?
Thanks in advance!!
// 1st image//
&main-background {
z-index: -1;
position: absolute;
width: 100%;
height: 500px;
background-image: url("images/campaign/1-bg.jpg");
}
// 2nd image//
&__main-bg {
position: relative;
width: 100%;
height: 550px;
background-color: black;
margin-bottom: 2em;
color: $blue-2017;
background-image: url("images/campaign/main-1.jpg");
box-shadow: 0 10px 6px -6px #777;
#include media($small-screen) {
font-size: 0.8em;
}
}
What is the value for this variable for $small-screen ?
Is there a need to us that ?
#include media($small-screen) {
}
Try removing those lines and see if it works . If it doesn't.
Try using reducing the percentage of your image 2 and using brute force Css ( !important ) at the end of each line in your Css for your second image. I am pretty sure that there are some Css overwriting your second image
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 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
I use the CSS Sprite Technique with a background image that looks something like this:
The CSS code for the icons:
div.icon {
background-color: transparent;
background-image: url("/images/icons.png");
background-position: 0 0;
background-repeat: no-repeat;
display: inline-block;
height: auto;
vertical-align: text-top;
width: auto;
}
div.icon:empty {
width:16px;
height:16px;
}
div.icon:not(:empty) {
padding-left:20px;
}
div.icon.attenuation {
background-position: 0 0;
}
My icons can be used like this:
<div class="icon warning"></div>
I want to put some text inside my icons like:
<div class="icon warning">There is a warning on this page</div>
But the problem is that the background image covers the entire text area:
The question is: how can I use only part of an image as a background image for part of my element?
Notes:
setting width to 16px for div.icon doesn't help.
Remember, where ever possible, you shouldn't change your markup just to achieve a design. It is possible using your markup.
div.icon:before {
content: "";
background-color: transparent;
background-image: url("/images/icons.png");
display: inline-block;
height: 16px;
vertical-align: text-top;
width: 16px;
}
div.icon:not(:empty):before {
margin-right: 4px;
}
div.icon.attenuation {
background-position: 0 0;
}
You have two ways:
1)Your markup must be like this:
<div class="icon warning"></div><div class="txt">There is a warning on this page</div>
.icon {width:10px(for ex.)}
2)You must change the image. Icons in the image must be below the another
Sorry, my previous answer was not well though out.
Edit:
If you have a 16px padding, you should set the width to 0, not 16px. And I've got troubles getting the :not(:empty) bit to work on all browsers; better get rid of it. So the CSS becomes:
.icon {
...
width:0; height:16px; padding-left:16px;
}
.icon:empty {
width:16px; padding-left:0;
}
jsFiddle
set width: 16px; height: 16px; overflow: hidden; text-indent: -9999em; and remove padding
I have a box defined that works for most of my site:
.searchBox
{
width: 610px;
height: 170px;
padding: 15px 55px 5px 15px;
background: url('../images/advanced_search_BG.jpg') no-repeat;
margin-top: 10px;
}
But I have one box that needs to be a little bigger; it has to be height: 220px.
I know I could duplicate the above, calling it, say searchBoxLarge, put that on my div tag, and be done. But that's duplicate code that I don't want.
This might be a 'dumb question', but I'm not trained in CSS and looking for assistance...
What is the format to specify the searchBoxLarge with the height: 220px, but without duplicating the entire searchBox entry?
Add searchBoxLarge to the searchBox declaration, and then make a separate declaration for just searchBoxLarge which overwrites the height value.
.searchBox, .searchBoxLarge
{
width: 610px;
height: 170px;
padding: 15px 55px 5px 15px;
background: url('../images/advanced_search_BG.jpg') no-repeat;
margin-top: 10px;
}
.searchBoxLarge
{
height: 220px;
}
There was a good article about doing this on SitePoint http://www.sitepoint.com/first-look-object-oriented-css/
I would suggest you read the responses to the article since there are some drawbacks to doing your CSS like this, and also some benefits.
I agree the name Object Oriented CSS is misleading because there is no true sub-typing
Cheers! Orin