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!
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;
}
The page contains a table and footer. Although I use a separate font size in the #footer 6px, it's still adapting the font size of the table 13px bold. How can this be fixed?
The footer is in a separate div not inside the table.
<table width="400" border="0" style="margin: auto;"></table>
<div id="footer">Copyright 2013</div>
CSS
table { margin: auto;
font:bold 13px Helvetica, Arial, sans-serif;}
#footer {
clear: both;
font-family: Helvetica, Arial, sans-serif;
font-size: 6pt;
text-align: left;
}
Did you try size: 6px?
My CSS skills have diminished since I haven't used them in ages but play around with it. Also be sure to say 6px not 6pt.
Also, you could try putting any desired text (the copyright stuff) into a paragraph tag. That way you specify even further which tags you are targeting, i.e. #footer p {size: 6px;}
In your original post of the issue, you have font-size:6pt, try changing it to 6px. Does that help?
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 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.
div.faq1 {
font-size: 175px;
font-family: Helvetica, Arial, Sans Serif;
font-weight: bold;
margin: 0;
}
So I am trying to figure out how to get the text "FAQ" to line up against either a container div or within this div itself.
I've also tried creating a regular div and then using the span tag to style the text but it continues to show a top and left margin of some sort regardless of if I use:
* {
margin: 0;
padding: 0;
}
Is this even possible to do?
I am pretty sure the text is actually that size (has that extra padding at the top and bottom of the text, double click the text and you will see the actual boundaries). But to accomplish more of what you want to do, you could add in the following:
line-height:75%;
That should help you achieve what you want.
EDIT:
noticed you wanted the left too .. use this
text-indent:-14px;
It also helps if you want to align anything in the div to a side by adding the follow code to the specified div.
div.faq1 {
font-size: 175px;
font-family: Helvetica, Arial, Sans Serif;
font-weight: bold;
margin: 0;
text-align: (left, center, right);
}
But then again, that could not be what you are asking for. Hope that helped.