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
Related
I am trying to tint an image with a transparent linear gradient.
Dev tools say my property is invalid. If I get rid of the gradient, the image shows up fine. Is there something I'm missing?
body {
background: linear-gradient (rgba(255,0,0,0.45),rgba(255,0,0,0.45)),
url('Fabric-4.png');
font-family: 'Oswald', sans-serif;
font-size: large;
}
You need to use prefix's for different browsers while using css gradient propery,
check this code.
body {
background: -webkit-linear-gradient(rgba(255,0,0,0.45), rgba(255,0,0,0.45));
font-family: 'Oswald', sans-serif;
font-size: large;
}
This is simply because your markup fails. You have a single space too much. Remove the space between linear-gradient and ( and you will see the issue sorted. I added the working code below, and marked it up to my own preference.
Here's a pen with the working example (and a different image). Try adding the space live in the pen, and see everything disappear again. :)
body {
background:
linear-gradient(
rgba(255,0,0,0.45),
rgba(255,0,0,0.45)),
url('Fabric-4.png');
font-family: 'Oswald', sans-serif;
font-size: large;
}
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;
}
In the footer of my site http://www.stefaanoyen.be (left column) I have some social media icons which are an icon font. On hover, I want the circles red and the icons in it white. The red circles work, but there's a white square behind them. How do I limit the white to the shape of the icons/circles?
This is my HTLM:
<p class="share">l i g f</p>
And this is my CSS:
.share a {
color: #ececec;
text-decoration: none;
font: 50px 'socialicoregular', Helvetica, sans-serif;
}
.share:hover {
cursor: pointer;
}
.share a:hover {
color: #B61618;
text-decoration: none;
font: 50px 'socialicoregular', Helvetica, sans-serif;
background-color: #fff;
}
Thanks a lot for your help!
Stefaan
There is no simple solution for this one because you only rely on a font. You could try to add a border-radius (your font-size is set to 50px so radius of 25px will probably do it but you will have to play around with it) to the .share a:hover element.
The "Shape of the icons/circles" is actually a rectangle.
You're setting the white background to the link. The link is a rectangle.
You won't be able to directly style the background of a font/character.
Since your icons are all rounded, here's a little trick you could use:
border-radius: 50px;
That's simply a guessed figure. It doesn't mean it's the right one. Just find the one you need that matches your icons height/width.
(You might also need to work with your line-height to make sure your font is, or at least looks vertically centered.)
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.
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.