Tessisamess

Previous | Next

Dropbox

Questions, comments, concerns? You're in the right place, buddy! All comments are screened for privacy, but if you'd rather drop me a line privately, my email is always open at tessisabiiitch[at]gmail. Please ask questions about specific codes and layouts on the original entry. Thank you!
xo Tess

Questions about the Generator documentation?
Questions about something in my shop?

Comments

Apr. 15th, 2017 10:37 pm (UTC)
hihi~

I was hoping you'd be willing to help me with a line (or two) of coding from a layout I bought from you. The original one did not have an image as a background and that was easy to add. What I'm struggling with it how to tell said background image to stay put on the right-side and to not repeat.

ignoring the [background here] of course...

body{color:#222;background:url([background here])#123a2f;margin:0;padding:20px 0 0 0;font-family:helvetica,arial,sans-serif;}

I am just not well-versed enough in IJ-CSS to get the no-repeat and alignment to stick. halp?
Apr. 27th, 2017 07:47 pm (UTC)
Hey, I'm sorry for the delay! I'm so behind on everything right now, haha. Okay so! When working with the background, you have a number of positions you can choose from; there are standard positions like bottom left or you can get pixel specific like 10px 20px and it will translate into 10px to the left and 20px from the top. You can shorthand these elements into background rather than declaring background-color, background-image, background-repeat, background-attachment, background-position and so on (super tedious lmao.)

So what you'll want for that is:
background:#123a2f url(IMAGE)bottom right no-repeat fixed;

And then you can change bottom to either top or center if you want it to sit differently.

A quick background example for reference:
background:#123a2f url(IMAGE)bottom right no-repeat fixed;

Is shorthand for the following (order of declarations doesn't usually matter for the background shorthand unless you're declaring specific px positioning):
background-color:#123a2f;
background-image:url(IMAGE);
background-position:bottom right;
background-repeat:no-repeat;
background-attachment:fixed;


The only thing you can't shorthand into it is background-size, which is a great declaration to use for fullsize wallpaper backgrounds to resize fluidly with monitor size. Some examples of this declaration:

background-size:cover; covers the height/width of the screen as best as possible without getting cut off
background-size:100% auto; 100% width and automatic height
background-size:auto 100%; 100% height and automatic width
background-size:50px; great for resizing a repeating pattern that you want smaller without editing the image


I hope that all helps with any background stuff!