This question already has an answer here:
Is there an easy way to contrast text over an image using css?
(1 answer)
Closed 2 years ago.
I would like to achieve the effect as per the attached image (via https://thierrychopain.com).
I have tried using mix-blend-mode: difference; (and other variants) but obviously that just inverts the background image too, whereas I would simply like to change the font colour as the background changes. I cannot immediately see how else this could be done via CSS. After inspecting the website itself (https://thierrychopain.com), I still can't see how the designer has achieved this in CSS alone.
How can this be done?
In looking at the page, the designer pulls a visual trick on you. There's actually two separate copies of that text. One inside the image display block and one outside. The one outside lies beneath it, and is black. The one inside is white, but overflow:hidden on the image container constrains it.
By carefully aligning the text to where it gets cut off, you see that effect.
Here's a quick example to demonstrate the technique. (Note: Since it's just a demo I didn't make it play well on mobile.)
JS Bin Example:
https://jsbin.com/loxulil/3/edit?output
If you know the width of the images before hand, You can try something like this.
The first background to color the text inside the image, and the second is for the rest of the text.
div {
/* to center text vertically and horizontally */
display: flex;
background: url(https://picsum.photos/200/300) center no-repeat;
padding: 50px;
}
h1{
/* to center text vertically and horizontally */
margin: auto;
background: linear-gradient(white, white) center/200px 100% no-repeat, black;
-webkit-background-clip: text;
color: transparent;
}
<div>
<h1>I'm not a Header Title</h1>
</div>
re-run the snippet for a different image.
Related
Now these days I want to believe everything is possible, when I saw the power of CSS - making irregular shapes with block elements, i.e. triangles, chamfered CSS Border Corners — how easy but how enthusiastic! So I tried to dream about something, something that I believe can be possible with some great knowledge of CSS.
div.image{
width: 18px;
height: 18px;
background: url(images/image-sprite.png) -70px 0;
display: inline-block;
}
Suppose I put an "Image Sprite" () with a width and height of 18px. But the image I called is NOT an 18px x 18px box-shaped image, suppose the image is Round or some Irregular shapes. When I put box-shadow to the div, it highlighted like a box, when I put text-shadow, it doesn't work, as the div/anchor element doesn't contain any texts in it.
If I want to put shadow onto the element, not onto the container (like a box-shaped HTML element), as the image shown, shadow to the outline of the background-less image only — then:
How can it be done with CSS? or,
Is that really possible?
NOTE: I know, when I have a background-less image and Photoshop, I can put necessary shadows into almost any element. But I asked the question, if something like this can be possible with raw CSS then it'd be a great achievement for us.
The new CSS filters will allow you to do this but browser support is not super deep.
Codepen Example
<div class="image">
<img src="http://www.equissage.co.uk/wp/wp-content/uploads/2010/08/equissage-red-horse.png" alt="" />
</div>
.image img {
width:400px;
-webkit-filter: drop-shadow(4px 4px grey);
}
The only way to do what you're asking is by recreating the shape with css or using a icon font.
As the element you want to border-shadow is an image these always become square or rectangular.
I'm creating a website designed by a print-designer. The background concists of two images:
one gradient that is repeteated along the y-axis and aligned with the bottom of the page
one image that is aligned with the bottom of the page and centered.(the circle)
demo:
The circle-part is pretty big and has most of the pages content on it. (~900px by ~750px).
If the page is to small I need to add scrolls. If the page is to big. I need the first image(vertical) and background-color(horizontal) to fill out the area for me. I would like to use multiple backgrounds, but the site needs IE8-support.
Cut a 1px strip for the gradient and repeat it horizontally on the body. Set the attachment to fixed.
Cut out the circle and place it as the background image of your content container. This will likely be a png with transparency to allow the previous gradient to show through.
CSS
body {
background: url('bg.jpg') center bottom repeat-x fixed;
}
.container {
background: url('circle.png') no-repeat center bottom;
margin: 0 auto;
min-height: 750px;
width: 900px;
}
HTML
<body>
<div class="container">
content here
</div>
</body>
Alternatively, you can use CSS3 to place the gradient and avoid the image altogether. Some older browsers won't support it, but it's a little more flexible than using a static gradient image.
Check out this handy generator - just select the colors and style and it will give you the code: http://www.colorzilla.com/gradient-editor/
If you scroll to the bottom of this page - http://dev.socialadr.com/get/begin06 - you'll see that the white background w/ drop shadow stops near the end.
This is the image file that I want to repeat vertically:
http://dev.socialadr.com/mod/theme_simplebluewhite/graphics/theme_contentback.gif
The CSS file being used is:
http://dev.socialadr.com/_css/css.php
And I believe it's this #page_wrapper id that needs to be modified:
#page_wrapper {
width:1014px;
margin:0 auto;
padding:0;
min-height: 300px;
background: url(http://dev.socialadr.com/mod/theme_simplebluewhite/graphics/theme_contentback.gif) repeat-y center top;
height:100%;
}
I've tried tons of different things, read a bunch of other StackOverflow posts about similar issues but for the life of me I can't get it to work.
Any ideas?
Thanks!
Kane
Try placing quotes around the URL:
background: url('http://dev.socialadr.com/mod/theme_simplebluewhite/graphics/theme_contentback.gif') repeat-y center top;
Your live CSS does not include the repeat-y property given in your pasted code.
Additionally, your image file is very large. Since the image is meant to be tiled, the image height should be the height of one tiling.
You should also break the image up into two pieces and set them as backgrounds on two different elements. Tiling the current image will include the top part of the box with the corners, which is not what you want. Set the corners-only image as the background on one element, then the tile image on another element with repeat-y.
This question already has answers here:
CSS: Background image and padding
(9 answers)
Closed 3 years ago.
I'd like to add a background to a div, position right center, but!, have some padding to the image. The div has padding for the text, so I want to indent the background a little. probably makes most sense w/ example:
http://jsbin.com/umuvud/edit#javascript,html,live
Thanks!
Updated Answer:
It's been commented multiple times that this is not the correct answer to this question, and I agree. Back when this answer was written, IE 9 was still new (about 8 months old) and many developers including myself needed a solution for <= IE 9. IE 9 is when IE started supporting background-origin. However, it's been over six and a half years, so here's the updated solution which I highly recommend over using an actual border. In case < IE 9 support is needed. My original answer can be found below the demo snippet. It uses an opaque border to simulate padding for background images.
#hello {
padding-right: 10px;
background-color:green;
background: url("https://placehold.it/15/5C5/FFF") no-repeat scroll right center #e8e8e8;
background-origin: content-box;
}
<p id="hello">I want the background icon to have padding to it too!I want the background icon twant the background icon to have padding to it too!I want the background icon to have padding to it too!I want the background icon to have padding to it too!</p>
Original Answer:
you can fake it with a 10px border of the same color as the background:
http://jsbin.com/eparad/edit#javascript,html,live
#hello {
border: 10px solid #e8e8e8;
background-color: green;
background: url("http://www.costascuisine.com/images/buttons/collapseIcon.gif")
no-repeat scroll right center #e8e8e8;
}
this is actually pretty easily done. You're almost there, doing what you've done with background-position: right center;. What is actually needed in this case is something very much like that. Let's convert these to percentages. We know that center=50%, so that's easy enough. Now, in order to get the padding you wanted, you need to position the background like so: background-position: 99% 50%.
The second, and more effective way of going about this, is to use the same background-position idea, and just use background-position: 400px (width of parent) 50%;. Of course, this method requires a static width, but will give you the same thing every time.
Method 1 (99% 50%)
Method 2 (400px 50%)
There is actually a native solution to this, using the four-values to background-position
.CssClass {background-position: right 10px top 20px;}
This means 10px from right and 20px from top.
you can also use three values the fourth value will be count as 0.
you can use background-origin:padding-box; and then add some padding where you want, for example: #logo {background-image: url(your/image.jpg); background-origin:padding-box; padding-left: 15%;}
This way you attach the image to the div padding box that contains it so you can position it wherever you want.
In case anyone else needs to add padding to something with background-image and background-size: contain or cover, I used the following which is a nice way of doing it. You can replace the border-width with 10% or 2vw or whatever you like.
.bg-image {
background: url("/image/logo.png") no-repeat center #ffffff / contain;
border: inset 10px transparent;
box-sizing: border-box;
}
This means you don't have to define a width.
first off, to be a bit of a henpeck, its best NOT to use just the <background> tag. rather, use the proper, more specific, <background-image> tag.
the only way that i'm aware of to do such a thing is to build the padding into the image by extending the matte. since the empty pixels aren't stripped, you have your padding right there. so if you need a 10px border, create 10px of empty pixels all around your image. this is mui simple in Photoshop, Fireworks, GIMP, &c.
i'd also recommend trying out the PNG8 format instead of the dying GIF... much better.
there may be an alternate solution to your problem if we knew a bit more of how you're using it. :) it LOOKS like you're trying to add an accordion button. this would be best placed in the HTML because then you can target it with JavaScript/PHP; something you cannot do if it's in the background (at least not simply). in such a case, you can style the heck out of the image you currently have in CSS by using the following:
#hello img { padding: 10px; }
WR!
To add space before background image, one could define the 'width' of element which is using 'background-image' object. And then to define a pixel value in 'background-position' property to create space from left side.
For example, I'd a scenario where I got a navigation menu which had a bullet before link item and the bullet graphic were changeable if corrosponding link turns into an active state. Further, the active link also had a background-color to show, and this background-color had approximate 15px padding both on left and right side of link item (so on left, it includes bullet icon of link too).
While padding-right fulfill the purpose to have background-color stretched upto 15px more on right of link text. The padding-left only added to space between link text and bullet.
So I took the width of background-color object from PSD design (for ex. 82px) and added that to li element (in a class created to show active state) and then I set background-position value to 20px. Which resulted in bullet icon shifted inside from the left edge. And its provided me desired output of having left padding before bullet icon used as background image.
Please note, you may need to adjust your padding / margin values accordingly, which may used either for space between link items or for spacing between bullet icon and link text.
The web site is here.
See that blue bar behind the menu items? It's 40 pixels high and one pixel wide, and used as a repeating background - so, why does it look strange after the right-most menu item?
The image is here, if anyone needs it.
The image is used thusly:
.menu_bar
{
background-image: url("http://leonixsolutions.com/images/menu_background.jpg");
background-repeat: repeat-x;
font-size: large;
padding-left: 160px;
padding-top: 5px;
text-align: center;
}
Nothing is wrong with it,
Your menu container div.pd_menu_01 has a background color #ffffff remove it and you'll be fine...
The real problem here is that .pd_menu_01 extends too far to the right (and with its white background, covers the gradient). Try making it inline-block with an auto width, or something similar, so that it doesn't extend further to the right than it has to. You could also set its background color to transparent (but in my browser, .pd_menu_01 makes the page too wide and thus introduces unnecessary and ugly horizontal scrollbars, so the width solution is still relevant).
.pd_menu_01 has a background color of white declared, and is a div. Since divs are block level elements, they have a default width of 100%.
Either declare the div to be display:inline, wrap the menu in a span instead of a div, or make the background color transparent instead of white.