I am having a great deal of difficulty with getting rid of the white space at the bottom when I apply a CSS3 gradient and the content has insufficient height for a scrollbar.
Such as here: http://womancareolympia.webs.com/
I have tried playing with setting both html and body heights to 100% or auto. I am able to make the gradient go to the bottom this way, but then when content requires a scrollbar, the content flows past the gradient.
Thanks for the help!
Add min-height: 100% to body.
Remove all instances of padding-top from body (or otherwise set it to 0).
Set top: 129px on #fw-container.
Set margin-bottom: 110px on #fw-container.
Add overflow: hidden to #fw-foottext.
(tested in Chrome+Firefox only)
I do think you should redesign your CSS to not use stuff like top: 100px and margin-top: -50px all over the place. There's just no reason for it.
I had the same problem. This can be resolved by adding the following properties to the body element (where the linear gradient has been defined)
body {
background-image: linear-gradient(
to right bottom,
var(--clr-primary-100) 0%, // Random colors
var(--clr-primary-900) 100%
); // Linear gradient
background-size: cover; // Add these properties to your body tag
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
}
I hope this helps. Let me know if you face any problems.
Related
I want to draw a border around a CSS background image, which resizes itself according to window size in a container div. I can draw a border around the div, but not around the image itself.
Can this even be done in this kind of setup?
Rather than post code here, I've made a working example HERE
<style parse-style>#pimg {
background:#FFF url( {{ img }} ) center center no-repeat;
background-size: contain;
height: 100%;
position:relative;
-webkit-transition: All 0.3s ease-in-out;;}
</style>
Thanks in advance.
No, there's no way to do that. You could add a second div that contains the image, but then you wouldn't be able to use background-size: contain.
If you knew that the image dimensions wouldn't change, you could add a second background-image, positioned in the same way, that was simply a transparent png with the border you wanted... but that would be really silly.
Unfortunately I don't have the time to create a working example right now, but a possible workaround may be the use of multiple backgrounds: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds
The second background could be an SVG rectangle with a stroke. To avoid possible stroke deformation due to scaling, use non-scaling stroke: https://www.w3.org/TR/SVGTiny12/painting.html#NonScalingStroke
As shipshape said, there's no way to draw border for BG image but I got an idea which may help you. You can use 2 background images and the behind one can be a plaint colored background playing role of the border. See the code below:
#pimg {
border: 1px solid black;
width: 200px;
height: 200px;
background-image: url({{ bg-image.jpg }}), url({{ 1px.jpg }});
background-size: 90% 90%, 100% 100%;
background-repeat: no-repeat, repeat;
background-position: center center, left top;
}
Use 1x1px shim image in your desired color as the border and repeat it.
The background size can control the width of the border. If you increase 90%, the border will be thinner and if you decrease it, the border will be wider.
I have a simple div with width less than 100%, with a background image having background-position 100% 0. Instead of the bg image sticking to the right side of the div, it is getting cut off, and seems to think its actual right position is the edge of the body, not the div whose background it is.
.bg {
width:80%;
height:500px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 100% 0;
background-size: 50%;
background-image: url(http://www.blackitty.net/photographs/photos/slideshow/slide/133/Tofino_2013-11-24.jpg);
}
I made a fiddle for it: http://jsfiddle.net/bobmeador/j2MWX/ The upper element shows the problem. Below is the full image so you can see what is getting cut off.
Any idea why it seems to be using the parent for its positioning rather than the div it belongs to?
I have the same result when my .bg div is set to width 100% and it is inside a div set to 80% width. It seems to be ignoring any container widths and just using the overall body width for its 100% reference.
I tihnk the problem is this background-attachment: fixed;, if you remove it the image aligns perfectly to the right.
http://jsfiddle.net/j2MWX/2/
First of all, I want to tell you guys that I'm not a designer and not a css/xhtml coder as well. I'm asking this question for one of my friend, He is working on a site which has diagonal gradient (it basically means that the gradient is in both of the direction X and Y), So he is getting problem in slicing the image for it so that he can fill the sliced image in background in such a way which will maintain the gradient in X and Y both direction.
So, It is like, If gradient is in X direction only than we generally slice a vertical 1px width image. Similarly, If gradient is in Y direction only then we generally slice a horizontal 1px height image. But What if the gradient is in both of the direction X and Y? In this case how will we slice the image or how could we implement it in CSS/XHTML?
Thanks A lot
Pukhraj
Your friend should consider doing this with CSS, as long as he/she is okay with it working only in modern, non-IE browsers.
Example: http://jsfiddle.net/h9rpE/2/
html, body {
font: bold 20px Helvetica, Arial, sans-serif;
height: 100%;
}
body {
background: white -moz-linear-gradient(135deg, black, white) fixed;
background: white -webkit-gradient(linear, left top, right bottom, from(white), to(black)) fixed;
}
Or you could use background-size:
Example: http://jsfiddle.net/rLttj/2/
body {
background: white url('http://dropbox.smallparade.com/grad.jpg') no-repeat fixed;
-moz-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%;
}
Simple. Don't splice it at all. You could simply take the background image as a whole and use CSS' background directive in your body tag. Only issue I could see you running into is the width of your gradient image. If it's (for example) 1024px wide and the client is rocking 1920px they'll see a lot of white. It's a little hard to answer without knowing who your monitor demographic is and your layout.
I think the answer is no, but can you position a background image with CSS, so that it is a fixed amount of pixels away from the right?
If I set background-position values of x and y, it seems those only give fixed pixel adjustments from the left and top respectively.
background-position: right 30px center;
It works in most browsers. See: http://caniuse.com/#feat=css-background-offsets for full list.
More information: http://www.w3.org/TR/css3-background/#the-background-position
It is possible to use attribute border as length from the right
background: url('/img.png') no-repeat right center;
border-right: 10px solid transparent;
There is one way but it's not supported on every browser (see coverage here)
element {
background-position : calc(100% - 10px) 0;
}
It works in every modern browser, but it is possible that IE9 is crashing. Also no coverage for =< IE8.
As far as I know, the CSS specification does not provide for exactly what you're asking, outside of CSS expressions, of course. Working off the assumption that you don't want to use expressions or Javascript, I see three hackish solutions:
Make sure your background image matches the size of the container (at least in width) and set background-repeat: repeat or repeat-x if only the width is equalized. Then, having something appear x pixels from the right is as simple as background-position: -5px 0px.
Using percentages for background-position exhibits special behaviour that is better seen than described here. Give it a shot. Essentially, background-position: 90% 50% will make the right edge of the background image line up 10% away from the right edge of the container.
Create a div containing the image. Explicitly set the position of the containing element position: relative if not already set. Set the image container to position: absolute; right: 10px; top: 10px;, obviously adjusting the final two as you see fit. Place the image div container into the containing element.
Try this:
#myelement {
background-position: 100% 50%;
margin-right: 5px;
}
Note though that the code above will move the whole element (not the background image only) 5px from the right. This might be ok for your case.
You can do it in CSS3:
background-position: right 20px bottom 20px;
It works in Firefox, Chrome, IE9+
Source: MDN
Image workaround with transparent pixels on the right to serve as right margin.
The image workaround for the same is to create a PNG or GIF image (image file formats that support transparency) which has a transparent portion on the right of the image exactly equal to the number of pixels that you want to give a right margin of (eg: 5px, 10px, etc.)
This works well consistently across fixed widths as well as widths in percentages.
Practically a good solution for accordion headers having a plus/minus or up/down arrow image on the header's right!
Downside: Unfortunately, you cannot use JPG unless the background portion of the container and the background color of the CSS background image are of the same flat color (with out a gradient/vignette), mostly white/black etc.
If you happen to stumble on this topic in these days of modern browsers you can use pseudo-class :after to do practicaly anything with the background.
.container:after{
content:"";
position:absolute;
right:20px;
background:url(http://lorempixel.com/400/200) no-repeat right bottom;
}
this css will put background to bottom right corner of ".container" element with 20px space on the right side.
See this fiddle for example http://jsfiddle.net/h6K9z/226/
The most appropriate answer is the new four-value syntax for background-position, but until all browsers support it your best approach is a combination of earlier responses in the following order:
background: url(image.png) no-repeat 97% center; /* default, Android, Sf < 6 */
background-position: -webkit-calc(100% - 10px) center; /* Sf 6 */
background-position: right 10px center; /* Cr 25+, FF 13+, IE 9+, Op 10.5+ */
If you want to specify only the x-axis, you can do the following:
background-position-x: right 100px;
Just put the pixel padding into the image - add 10px or whatever to the canvas size of the image in photohop and align it right in CSS.
I was trying to do a similar task to get a dropdown arrow always on the right side of the table header and came up with this which seemed to work in Chrome and Firefox, but safari was telling me it was an invalid property.
background: url(http://goo.gl/P93P5Q) center right 10px no-repeat;
After doing a bit of messing around in the inspector, I came up with this cross-browser solution that works in IE8+, Chrome, Firefox, and Safari, as well as responsive designs.
background: url(http://goo.gl/P93P5Q) no-repeat 95% center;
Here is a codepen of how it looks and works. Codepen is written with SCSS - http://cdpn.io/xqGbk
You can position your background image in an editor to be x pixels from the right side.
background: url(images_url) no-repeat right top;
The background image will be positioned in top right, but will appear to be x pixels from the right.
Works for all real browsers (and for IE9+):
background-position: right 10px top 10px;
I use it to RTL WordPress themes.
See example: temporary website or the real website will be up soon.
Look at the icons at the big DIVs right corners.
Another solution I haven't seen mentioned is to use pseudo elements and I do believe this solution will work with any CSS 2.1 compliant browser (≥ IE8,≥ Safari 2, ...) and it should also be responsive :
element::after
{
content:' ';
position:relative;
display:block;
width:100%;
height:100%;
bottom:0;
right:-5px; /* 10 px from the right of element inner-margin (padding) see example */
background:url() right center no-repeat;
}
Example: The element eg. a square sized 100px (without considering borders) has a 10px padding and a background image should be shown inside the right padding. This means the pseudo-element is a 80px sized square. We want to stick it to the right border of the element with right:-10px;. If we'd like to have the background-image 5px away from the right border we need to stick the pseudo-element 5px away from the right border of the element with right:-5px;...
Test it for your self here : http://jsfiddle.net/yHucT/
If the container has a fixed height:
Tweek the percentages (background-position) until it fits correctly.
If the container has a dynamic height:
If you want a padding between your background and your container (such as when custom styling inputs, selects), add your padding to your image and set the background position to right or bottom.
I stumbled on this question while I was trying to get the background for a select box to fit say 5 px from the right of my select. In my case, my background is an arrow down that would replace the basic drop down icon. In my case, the padding will always remain the same (5-10 pixels from the right) for the background, so it's an easy modification to bring to the actual background image (making its dimensions 5-10 pixels wider on the right side.
Hope this helps!
Tweaking percentages from the left is a little brittle for my liking. When I need something like this I tend to add my container styling to a wrapper element and then apply the background on the inner element with background-position: right bottom
<style>
.wrapper {
background-color: #333;
border: solid 3px #222;
padding: 20px;
}
.bg-img {
background-image: url(path/to/img.png);
background-position: right bottom;
background-repeat: no-repeat;
}
.content-breakout {
margin: -20px
}
</style>
<div class="wrapper">
<div class="bg-img">
<div class="content-breakout"></div>
</div>
</div>
The .content-breakout class is optional and will allow your content to eat into the padding if required (negative margin values should match the corresponding values in the wrapper padding). It's a little verbose, but works reliably without having to be concerned about the relative positioning of the image compared to its width and height.
Its been loong since this question has been asked, but I just ran into this problem and I got it by doing :
background-position:95% 50%;
Solution for negative values. Adjust the padding-right to move the image.
<div style='overflow:hidden;'>
<div style='width:100% background:url(images.jpg) top right; padding-right:50px;'>
</div>
</div>
Better for all
background: url('../images/bg-menu-dropdown-top.png') left 20px top no-repeat !important;
This works in Chrome 27, i don't know if it's valid or not or what other browswers do with it. I was surprised about this.
background: url(../img/icon_file_upload.png) top+3px right+10px no-repeat;
What I am trying to do is to show both background-color and background-image, so that half of my div will cover the right shadow background image, and the other left part will cover the background color.
But when I use background-image, the color disappears.
It's perfectly possible to use both a color and an image as background for an element.
You set the background-color and background-image styles. If the image is smaller than the element, you need to use the background-position style to place it to the right, and to keep it from repeating and covering the entire background you use the background-repeat style:
background-color: green;
background-image: url(images/shadow.gif);
background-position: right;
background-repeat: no-repeat;
Or using the composite style background:
background: green url(images/shadow.gif) right no-repeat;
If you use the composite style background to set both separately, only the last one will be used, that's one possible reason why your color is not visible:
background: green; /* will be ignored */
background: url(images/shadow.gif) right no-repeat;
There is no way to specifically limit the background image to cover only part of the element, so you have to make sure that the image is smaller than the element, or that it has any transparent areas, for the background color to be visible.
To tint an image, you can use CSS3 background to stack images and a linear-gradient. In the example below, I use a linear-gradient with no actual gradient. The browser treats gradients as images (I think it actually generates a bitmap and overlays it) and thus, is actually stacking multiple images.
background: linear-gradient(0deg, rgba(2,173,231,0.5), rgba(2,173,231,0.5)), url(images/mba-grid-5px-bg.png) repeat;
Will yield a graph-paper with light blue tint, if you had the png. Note that the stacking order might work in reverse to your mental model, with the first item being on top.
Excellent documentation by Mozilla, here:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds
Tool for building the gradients:
http://www.colorzilla.com/gradient-editor/
Note - doesn't work in IE11! I'll post an update when I find out why, since its supposed to.
use
background:red url(../images/samle.jpg) no-repeat left top;
And to add to this answer, make sure the image itself has a transparent background.
Actually there is a way you can use a background color with a background image. In this case, the background part will be filled with that specified color instead of a white/transparent one.
In order to achieve that, you need to set the background property like this:
.bg-image-with-color {
background: url("example.png") no-repeat, #ff0000;
}
Note the comma and the color code after no-repeat; this sets the background color you wish.
I discovered this in this YouTube video, however I'm not affiliated with that channel or video in any means.
Here's an example of using background-image and background-color together:
.box {
background-image: repeating-linear-gradient( -45deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .2) 15px, transparent 15px, transparent 30px);
width: 100px;
height: 100px;
margin: 10px 0 0 10px;
display: inline-block;
}
<div class="box" style="background-color:orange"></div>
<div class="box" style="background-color:green"></div>
<div class="box" style="background-color:blue"></div>
Make half of the image transparent so the background colour is seen through it.
Else simply add another div taking up 50% up the container div and float it either left or right. Then apply either the image or the colour to it.
Gecko has a weird bug where setting the background-color for the html selector will cover up the background-image of the body element even though the body element in effect has a greater z-index and you should be able to see the body's background-image along with the html background-color based purely on simple logic.
Gecko Bug
Avoid the following...
html {background-color: #fff;}
body {background-image: url(example.png);}
Work Around
body {background-color: #fff; background-image: url(example.png);}
Hello everyone I tried another way to combine background-image and background-color together:
HTML
<article><canvas id="color"></canvas></article>
CSS
article {
height: 490px;
background: url("Your IMAGE") no-repeat center cover;
opacity:1;
}
canvas{
width: 100%;
height: 490px;
opacity: 0.9;
}
JAVASCRIPT
window.onload = init();
var canvas, ctx;
function init(){
canvas = document.getElementeById('color');
ctx = canvas.getContext('2d');
ctx.save();
ctx.fillstyle = '#00833d';
ctx.fillRect(0,0,490,490);ctx.restore();
}
Please let me know if it worked for you
Thanks
background:url(directoryName/imageName.extention) bottom left no-repeat;
background-color: red;