I am trying to line up four background images to make up a side menu panel with four text links overlaying each. Presuming background-image is the best way to do this, I am applying the background image to each text area. What I'd like to know is, is there anyway I can get the background image to display full size so that I can then align my text to the correct place.
PAGE LINK: http://dbtest.destinationballybunion.ie/?page_id=4600
Here's the CSS I have tried applying to the first two text areas:
.boxera {
background-image: url('http://dbtest.destinationballybunion.ie/wp-content/uploads
/2014/11/NULEFT-A.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
.boxera p {
margin-top: 4.000em;
margin-right: 1.000em;
margin-left: 12.500em;
}
.boxerb {
background-image: url('http://dbtest.destinationballybunion.ie/wp-content/uploads
/2014/11/NULEFT-B.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
.boxerb {
position: absolute;
margin-top: -1.800em;
}
And the last two text areas I've tried putting in specific dimensions, but with the same result.
.boxerc {
background-image: url('http://dbtest.destinationballybunion.ie/wp-content/uploads
/2014/11/NULEFT-C.png');
background-size: 16.000em auto;
background-repeat: no-repeat;
}
.boxerc {
position: absolute;
margin-top: 12.500em;
}
.boxerd {
background-image: url('http://dbtest.destinationballybunion.ie/wp-content/uploads
/2014/11/NULEFT-D.png');
background-size: 29.688em 20.250em;
background-repeat: no-repeat;
}
.boxerd {
position: absolute;
margin-top: 26.500em;
}
Can anyone help me with this. I've tried looking this up, it all seems straightforward until I put it into practice!
I added height and width to boxera and it resized the image.
So for example
add the corresponding image sizes to:
div.wpb_text_column.wpb_content_element.boxera
div.wpb_text_column.wpb_content_element.boxerb
div.wpb_text_column.wpb_content_element.boxerc
div.wpb_text_column.wpb_content_element.boxerd
so for boxera
height:295px; width:475px;
This is the only way I can think of actually altering the background image as you've rapped it so deeply in divs. Unless as mentioned you strip it out of CSS and into some image tags thats the only other way around it I think.
Related
I have the following CSS at the root of the file (to check this issue Im about to explain):
.why-choose-us-image {
width: 100%;
height: 100%;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.why-choose-us-image.bg1 {
background-image: url(assets/images/bigdog.jpg);
}
And Im placing that div on a background as follows:
<div class="why-choose-us-image bg1">
</div>
But the image is not showing up. Even if I style="background-image......" the div, still not popping up on the background, but the image is there because it shows up if I insert it as an image! Super crazy.
Do you identify what am I doing wrong on the code? Thank you all.
Try this, because you should correct the address to your files
.why-choose-us-image.bg1 {
background-image: URL(../assets/images/bigdog.jpg);
}
Or this because width and height not define
.why-choose-us-image.bg1 {
height: 118px;
width: 118px;
}
I am new to CSS and am tinkering with a few options. I want a pic called 'toplayer.jpg' to be repeated horizontally at the bottom of my webpage. I have used this code in an external style sheet. The pattern repeats horizontally...however it floats to the top of the page.
body {
background-image: url("../Images/toplayer.jpg");
background-position: bottom;
background-repeat: repeat-x;
}
Any suggestions for this noob would be appreciated. Thank you.
Your background declarations should work, I guess the issue is that the body tag has no height :
html,body {
height: 100%;
}
body {
background-image: url("https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg");
background-position: bottom;
background-repeat: repeat-x;
}
I am using the Electoral template from ThemeForest here, this is the original template. I am trying to use CSS to fade out the edges of the blue image to the right, however the change is affecting the entire container. I've changed the background color to reflect the undesired behavior at the first link.
What I want to do is be able to apply CSS instructions to just the image. This is the section that controls the container:
#hero .q-container {
position: relative;
padding-top: 8%;
background-image: url(../img/sam.png);
background-repeat: no-repeat;
background-position: bottom 30% right 10%;
background-size: 30%;
}
I tried using the following but it didn't work:
#hero .q-container img {
background-color: red;
}
Does anyone have any ideas to fix this? Thanks!
I have one image sheet like the one in this link (http://jquerytools.org/media/img/demo-navi.jpg).
I would like to get only a component of that image.
How can we get only component of image in CSS?
The correct terminology is CSS Sprite.
You can achieve this using background positioning:
div
{
background-image:url('http://jquerytools.org/media/img/demo-navi.jpg');
background-position:-20px 80px;
width:100px;
height:80px;
}
http://jsfiddle.net/Lz46r/
You can try this: http://www.guistuff.com/css/css_imagetech1.html
Cropping X and Y
That first image was kind of a softball. All the cool kids know how to take advantage of cropping an image in both axes. There are several reasons for doing this: You may have images of different sizes and want to place all of them within one file, for example. If you only crop on one axis, you'd be saving a file with the largest possible width or height of the array of images you want to use. Also, there are compression elements that you may want to take advantage of in the PNG file format, like keeping images with the same background color in the same horizontal row, and then having several rows.
Whatever the reason, there actually isn't much more to this than what we've seen so far. Here's another example image:
.icons
{
display: block;
width: 40px;
height: 40px;
background-image: url(images/sixicons.png);
background-repeat: no-repeat;
}
You can deduce from this class that the width and height of each icon is 40 pixels, and that the image file name is sixicons.png. I didn't create a very challanging example this time for X/Y cropping in the sense that all of the sub-images are of the same size. As you'll see, however, even if they weren't, you'd still be using a simimlar (though not exact) technique.
First, let's crop the top-left icon:
.icon_1 { background-position: 0px 0px; }
The markup would be:
<span class="icons icon_1"></span>
That was, of course, the easiest one. Now let's say we want the middle-bottom icon:
.icon_5 { background-position: -40px -40px; }
Let's see the CSS for all of the icons:
.icon_1 { background-position: 0px 0px; }
.icon_2 { background-position: -40px 0px; }
.icon_3 { background-position: -80px 0px; }
.icon_4 { background-position: 0px -40px; }
.icon_5 { background-position: -40px -40px; }
.icon_6 { background-position: -80px -40px; }
This should do what you need:
http://jsfiddle.net/8Eucw/1/
CSS:
#aBit {
background-image: url('http://www.google.co.uk/images/nav_logo107.png');
background-position-x: 114px;
background-position-y: 63px;
width: 18px;
height: 18px;
}
HTML:
<img src="http://www.google.co.uk/images/nav_logo107.png" /><br />
<hr />
<img id="aBit" />
You need to use CSS Sprites. There are some very simple tutorials here.
I'm looking to recreate an effect similiar to the popular science app. Basically have one big background image and then have HTML/CSS layer on top of that. When the user scrolls the content, then background-position of the image should remain in place, and not scroll.
Obviously in a 'regular' browser I would use background-attachment:fixed, but this doesn't seem to work on the ipad. I know position:fixed doesn't work as you might expect according to safari spec - but is there any way of achieving this?
You can use this code to make a fixed background layer to hack into this problem.
#background_wrap {
z-index: -1;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: 100%;
background-image: url('xx.jpg');
background-attachment: fixed;
}
And put <div id="background_wrap"></div> into <body></body>
<body>
<div id="background_wrap"></div>
</body>
Expanding on Anlai's answer above, I found that solution was repeating my image as I was scrolling rather than keeping it fixed. If anyone else had this problem my CSS for the background_wrap ID is as follows:
#background_wrap {
z-index: -1;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: cover;
background-image: url('../images/compressed/background-mobile.png');
background-repeat: no-repeat;
background-attachment: scroll;
}
Just changed the background size and background attachment to make the image static.
Mobile safari scales your whole site down to it's viewport size, including the background image. To achieve the correct effect, use the -webkit-background-size CSS property to declare your background size:
-webkit-background-size: 2650px 1440px;
(hat tip to commenter Mac)
I believe you can place the background image in a div and set the z-index to appear behind other content. Afterwards you can use javascript to fix the position of the div which contains the background image.
I'm not that profi one, but I've solved this problem usin' jquery.
It's quite simple)
Here is the code:
jQuery(window).scroll(function(){
var fromtop = jQuery(window).scrollTop();
jQuery(" your element ").css({"background-position-y": fromtop+"px"});
});
next solution in Css:
body {
background-image: url( ../images/fundobola.jpg );
background-position: top center;background-repeat:no-repeat;
background-size: 1900px 1104px;
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
--- not use---- (cause: scroll disable )
position: fixed
Resolved in Ipad and iPhone
Similar to Ig365, I found that Angolao's solution causes image repeat, depending on image proportions; however, Ig365's image doesn't mimic the placement of background-fixed . To do this, add a background-position-x: 50%;. (Depending on your image dimensions, you may also need background-position-y: 50%.)
#background_wrap {
z-index: -1;
position: fixed;
top: 0;
background-position-x: 50%;
height: 100%;
width: 100%;
background-size: cover;
background-image: url('imageURL');
background-repeat: no-repeat;
}