I have a background that looks like this :
As you can see it is not fully stretched. So I want it to be cover everything.
body {
background-image: url("/site_media/resume/images/bg_main.jpg");
background-color: #c7c7c7;
background-repeat: repeat-x;
font: 12px/20px;
font-family: "lucida Sans Unicode" "Lucida Grande" sans-serif;
}
if I do
background-size: 100%;
i'm getting only dark green color everywhere.
try to use
background-size: cover;
See MDN documentation
[...] cover, which specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.
Related
I want to use a font from here. Like you can see, there is a preview image ontop and a small field down below where you can write an example text.
The font is like every other font, meaning only black. Is it possible with css to mimic the texture that is used in the preview image? I mean the dark spots. The white spots that are not on the font can be ignored.
Preview Front with texture
Here is a simple example of text clipping the background of its element using CSS background-clip (note, this is not completely standard and some browsers require a prefix and it is not compatible with IE):
.fontBg {
background-image: url(https://picsum.photos/id/1016/300/100);
background-size: cover;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-size: 60px;
font-weight: 900;
font-family: sans-serif;
}
<div class="fontBg">HERE IS SOME TEXT</div>
Excuse me for my bad English.
I decided to insert two different backgrounds in my wordpress blog but I found some problems. I tried to insert a fixed background at the top center and a second background that repeats vertically from the top center under the first background. Here's the code I used:
body {
margin: 0; padding: 0;
font: 62.5% "Lucida Grande", "Lucida Sans Unicode", Sans-Serif;
color: #000; text-align: left;
background-image: url(http://i39.servimg.com/u/f39/16/16/32/12/topgro11.jpg), url(images/bg.gif);
background-repeat: no-repeat, y-repeat;
background-position: top center, top center;
}
Unfortunately, as you can see here -> http://www.picopod.it/ the result is disappointing... Where am I doing wrong? Thanks for your support!
UPDATE: I resolved my problem by changing the "y-repeat" with "repeat-y". What a stupid error I've done! Ahahaha
Thank you all!
I have been fiddling with my Pytheas theme again. This time, I am trying to insert a 2-color gif (suitable for tiling) onto the backgrounds of my pages and posts. Note that I do not mean the background of the whole page. That is, and should remain, black. The site/sample-post in question is here.
I have investigated as extensively as I can given my coding deficiencies. Currently, I've been editing the styles.css file. I replaced this default code:
/* Body & Main
================================================== */
body { background: #eee url("images/main-bg.png") repeat; nowhitespace: afterproperty; font: 12px/1.8 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #444; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
body a { color: #f15a23 } /*main link color*/
body a:hover { text-decoration: none; color: #000 }
with this revised code, which I cobbled together with my hazy understanding of CSS.
body {
background: url("http://longgame.org/wp-content/uploads/grid-paper-2color-start.gif") repeat; nowhitespace: afterproperty;
background-repeat: repeat;
background-color:rgba(255,255,255,0.0);
font: 12px/1.8 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #444; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
}
My thinking was that I needed that rgba bit to ensure that the color is transparent (in case the texture was 'behind' it). I don't know. I was throwing darts. Maybe it's in the wrong place. Maybe it's just flat out wrong. :)
I turn to you more qualified folks to help me out. Thanks in advance for any guidance you can offer.
Rather than setting the CSS of your body element, try setting it on #main-content
Also, you only need the first line to achieve the effect you want:
#main-content {
background: url("http://longgame.org/wp-content/uploads/grid-paper-2color-start.gif") repeat;
}
If you don't want the background of the whole page to be affected, but only the background of the WordPress page/post, you shouldn't be adjusting the background properly of the body element in your CSS, which would affect the entire HTML page, but rather of the element for which you want to apply the background, probably #main-content.
Try setting that background property on #main-content near line 24 of your CSS file instead, e.g.
#main-content {
background: url("http://longgame.org/wp-content/uploads/grid-paper-2color-start.gif") repeat;
}
I have managed to add a custom background to my site. I change the body in the bootstrap.css
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-image: url("../images/norn-race.jpg");
background-repeat:no-repeat;
background-attachment:fixed;
font-size: 13px;
line-height: 18px;
color: #333333;
background-color: #ffffff;
}
My problem is that it is not responsive, If i zoom in the background gets bigger and if I zoom out the background gets smaller, but it should be always be the same size on different resolutions.
Where is my mistake?
I should also add the background is only visible on the left and right. At the moment I am just using a big background to cover everything, which is unnecessary, because 80% is hidden by my content.
What is the correct approach to show images on the left and right?
responsive image work when your image is in the content, aka as a <img src="" alt="">, not when set as background-image
check background-size property for responsive-design background size
body {
background: #E2E2E2 url("/-/img/bg.jpg") repeat -20% -146px;
color: #45445d;
color: rgba(0, 0, 0, 0.7);
font: normal 100%/1.5 Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
}
This is a code snippet from robot-or-not.com ...featured in an article called ..Responsive Webdesign. I have two questions about the CSS in the article.
If I want to use em's across a site I
understand that I need a base font
size and then work out the em by
TARGET SIZE / BASE SIZE = EM. Do I
need then to set the base font size
in "PX" in the body first and in the
code above what does font: 100%/1.5
mean?
My second question is about the
background property.. what does
repeat "-20% -146px;" this mean/do?
I know about repeat:no-repeat and
repeat-y, repeat-x but have never
used % or PX for this..
You don't need a "base size". The default size for fonts is configured by the user in his/her browser. This is what the browser then uses for 1em (or 100%).
You can define your own "base size" in the body (body { font-size: 12px }) and then go ahead and use ems (or %) for other font-sizes, such as h1 { font-size: 1.5em } instead of h1 { font-size: 18px } (12px * 1.5 = 18px). This has the "advantage" for you as the developer that if you choose to change your "base size", then all other font-sizes (or other em based values) will scale accordingly.
However by setting such a pixel-based base size, you override the users configured (and thus probably preferred) font-size with your (the designers) choice. Many designers do this, because they believe their pixel-perfect design must not be disturbed by the users preferences. Whether you need this or let the user choose is your decision.
100%/1.5 is part of the font shorthand property and is the abbreviation for setting font-size: 100% and line-height: 1.5.
background is also a short hand property and background: #E2E2E2 url("/-/img/bg.jpg") repeat -20% -146px; extends to:
background-color: #E2E2E2;
background-image: url("/-/img/bg.jpg");
background-repeat: repeat;
background-position: -20% -146px;
background-position: -20% -146px means that the top left corner of the background image isn't positioned at the top left corner of its element, but it is pushed 20% of the width of its element to the left and 146 pixels up.