Anyone able to help me learn to css?
Pem, Pols little help plz?
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.
Thank you very much!
I dinkerd with it a little as sometimes I mix up my left and right and I had said the wrong thing in the previous post. If its on the right it doesn't interfere with the reading of the posts so I left out the .alldaposts bit.
I tried to make the image sharper by downsizing it, what do you think? It looked quite fuzzy at full 100 x 100.
Is there anyway to change the opaque barring on each alternate post so that they are transparent as well?
Thank you very much!
I dinkerd with it a little as sometimes I mix up my left and right and I had said the wrong thing in the previous post. If its on the right it doesn't interfere with the reading of the posts so I left out the .alldaposts bit.
I tried to make the image sharper by downsizing it, what do you think? It looked quite fuzzy at full 100 x 100.
Is there anyway to change the opaque barring on each alternate post so that they are transparent as well?
That is where you would need the % sings. Try changing it to
body{ background: url(%%tikitorch%%); }