Anyone able to help me learn to css?
Pem, Pols little help plz?
That is where you would need the % sings. Try changing it to body{ background: url(%%tikitorch%%); }
That is where you would need the % sings. Try changing it to `body{ background: url(%%tikitorch%%); }`
Cool! Thanks for holding my hand :)
Now I have 6 of them tiled 3x2, how can I reduce that to one, centre of page height on the left hand side of the page.
Cool! Thanks for holding my hand :)
Now I have 6 of them tiled 3x2, how can I reduce that to one, centre of page height on the left hand side of the page.
In the body selector, add these lines after the background line:
background-size: 100vw 100vh;
background-repeat: no-repeat;
background-position-x: -0px;
The background size line adjusts the size of the image to cover 100% of the monitor's width, and 100% of the monitor's height. You can adjust them as needed. The background repeat line sets the image to not repeat, so you don't get the extra torches. Adjust the background position line as needed. The negative numbers will be closer to the left.
I would also change the background line to say background-image, then add a new line after that which says background-color: black!important;. This is because if the torch image is too far to the left, the image doesn't cover the background completely, and leaves a color barrier. This extra code will change the page's background color to match the image. You could also make the tiki torch image have a transparent background.
Overall the whole thing would look like this:
body {
background-image: url(%%tikitorch%%);
background-color: black!important;
background-size: 100vw 100vh;
background-repeat: no-repeat;
background-position-x: -700px;
background-attachment: fixed;
}
A few more changes as a personal suggestion:
.alldaposts {
background-color: rgba(0,0,0,0.75);
}
This basically adds a transparent background behind the odd numbered posts on the page, so the text is easier to read against the tiki torch image.
And back in the body selector, you can also add background-attachment: fixed;. This basically means that the tiki torch image will stay in the same place on the screen even as you scroll. It's optional, but I personally think it looks better that way.
Let me know if you need any more help. Also, depending on your browser, you can use inspect element to look at page elements, figure out which selectors do what, and experiment with the css applied to them. Chrome in particular has a very useful autofill feature, so you don't always have to look up different attributes and see what they do.
In the body selector, add these lines after the background line:
`background-size: 100vw 100vh;
background-repeat: no-repeat;
background-position-x: -0px;`
The background size line adjusts the size of the image to cover 100% of the monitor's width, and 100% of the monitor's height. You can adjust them as needed.
The background repeat line sets the image to not repeat, so you don't get the extra torches.
Adjust the background position line as needed. The negative numbers will be closer to the left.
I would also change the background line to say `background-image`, then add a new line after that which says `background-color: black!important;`. This is because if the torch image is too far to the left, the image doesn't cover the background completely, and leaves a color barrier. This extra code will change the page's background color to match the image. You could also make the tiki torch image have a transparent background.
Overall the whole thing would look like this:
`body {
background-image: url(%%tikitorch%%);
background-color: black!important;
background-size: 100vw 100vh;
background-repeat: no-repeat;
background-position-x: -700px;
background-attachment: fixed;
}`
A few more changes as a personal suggestion:
`.alldaposts {
background-color: rgba(0,0,0,0.75);
}`
This basically adds a transparent background behind the odd numbered posts on the page, so the text is easier to read against the tiki torch image.
And back in the body selector, you can also add `background-attachment: fixed;`. This basically means that the tiki torch image will stay in the same place on the screen even as you scroll. It's optional, but I personally think it looks better that way.
Let me know if you need any more help. Also, depending on your browser, you can use inspect element to look at page elements, figure out which selectors do what, and experiment with the css applied to them. Chrome in particular has a very useful autofill feature, so you don't always have to look up different attributes and see what they do.
Ok so I copied and pasted the bit Pol has put at the bottom with my bits in
body{ background: (tikitorch); }
but nothing is appearing in the subs background?