![]() ![]() try out different alignments to see what difference it makes! for this demo, i’ll be using ‘bottom right’, so all i need to do is change the ‘background position’ part in my css.īackground-image:url(’ background-position: bottom right Now, take a look at your theme and choose the positioning -Īs we have our sidebar and posts over to the left, with a lot of blank space to the right, it makes sense to have our background aligned ‘bottom right’ or ‘top right’ or ‘centre right’ so that it will fill that blank space. So find the ‘body’ section in your css ( around line 13 ) and add in those lines!īackground-image:url(’ background-position: top left If you want to add your background image to the ‘main’ area of your theme, you will need to add those lined to the ‘body’ css section as this gives the overall styling for your theme. the default is for the background to scroll along with the page. the attachment - background-attachment: fixed - a ‘fixed’ background means that the image will stay in place when you scroll down the page.if it says ‘repeat’ then the image will repeat, in effect, it will tile itself. the ‘repeat’ value - background-repeat: no-repeat - if you have ‘no-repeat’ then the image will only appear once, and only where you tell it to.‘right center’ will align it to the right, but with the center of the screen height wise… make sense? try them out to see what difference it makes… if you use ‘bottom center’ then the anchor will be the bottom of the screen but centered width wise. so for example, if you use ‘top left’ the anchor of your image ( the bit of the screen your image aligns to ) will be the top left of the screen. the positioning - background-position: top left - you can use any combination of left, right, top, bottom or center.the image url - background-image:url(’.THEME 101 PART 5 - Adding images, backgrounds, sidebar, ec.ĭon’t forget to pick up the code from the end of part 5 as this is the starting point for this tutorial!Īny background image will need at least four lines of code. this time we’re going to look at adding in some fancy stuffs in this case, images that you can apply to different parts of your theme! Welcome back friends, here’s part 6 in the series. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |