CHAPTER#2: ADDING A BACKGROUND IMAGE

CHAPTER 2: ADDING A BACKGROUND-IMAGE

And... I've got this first request from Eyelinerbaby about "How to add a background image?"
We will use this image for the tutorial.

In AFF, as far as I know, the maximum size of image allowed here is 800px. So if ever you wanted your background image to be 801px and above, you should divide the image into two, equal parts. I will discuss this later. I'll first discuss how to use the image as a background.

First, let us enclose this imagei nto a div.

< div style="float:left;width:500px;height:500px" >< img src="http://data1.whicdn.com/images/84406284/original.png" / >< / div >

This comes out into this:

Why do we exactly have to enclose this image into a div? It's because the div will serve as the placeholder of the image. Imagine a bird without a cage. It flies everywhere, and if it doesn't know how to come back home, it won't return. That goes a little out of topic but, in simplest term, this image might go displaced sooner or later so you have to enclose it in a div to make coding more flexible and easier. And please take note that float:left is an essential property & attribute or else, things won't overlap. I don't know why but it happens. It was even my largest trouble and problem when I was just starting to make layouts. And you also have to match the width of the div with the width of the image or else your image will appear squished (which does not happen in the old aff layout, green one). Height doesn't matter though.

Let's add some elements.

"Trust and hope. Those are the only ways."

What I did was add this code:

< div style="float: left; width: 400px; height: 50px; background-color: rgb(255, 255, 255); margin-top: -100px; text-align: center;border-radius:0px 30px 30px 0px" >< br />
< span style="color:#696969;" >< span style="font-family:trebuchet ms;" >< span style="font-size:12px;" >< em >"Trust and hope. Those are the only ways."< /em >< /span >< /span >< /span >< /div >

How does this code works? It just add that round-ish thing there. The background-color property obviously gives the div a color. For white, you can either write #fff/#ffffff (the hex code) or the RGB which is what was written above. The margin-top moves the image either downwards or upwards. If it's negative, it will move up. And if it's the absolute value/positive, it will move down. Text-align, aligns the text inside the div and the border-radius was the one responsible for the roundness of the corners. Border-radius works like this : 0px (top-left) 30px (top-right) 30px (bottom-right) 0px (bottom-left). It's like rotating clockwise. Or you can write it separately as in border-top-left-radius and so on. (But it's easier that way right?)

Note that editing will be much easier if you'll enclose the whole div in a div so adjusting the position won't be too tedious.

Now let's discuss how should we deal with 801px+ images. I'll just discuss the steps.

1. Edit an image with Photoshop/gimp or any other image editor that works the same as those editors.
2. Make a canvas of any width more than 800 and any height.
3, Paste the image there and resize it to fit the whole canvas. No space should be empty.
4. Flatten the image so the excess (pixels out of the canvas) will be cropped and removed.
5. Make a canvas with a width which is a quotient of your original canvas divided into 2 and the same height (IDK how to explain this T_T but as an equation it would be ocw/2; ocw = original canvas width).
6. Paste the image on the canvas and make sure the edges fit in. DO NOT RESIZE IT. Just let the left edges to fit the canvas and then save it. Same as the edges on the right side. Save it again.
7. Upload it.

The div code would look like this (Let's say my image has a total width of 1000px and height of 400px):

< div style="float:left;width:1000px;height:400px" >
< div style="float:left;width:500px;height:400px" >< img src="linkhere" >< /div >
< div style="float:left;width:500px;height:400px" >< img src="linkhere" >< /div >
< /div >

You don't have to worry about anything. The image will position next to each other accordingly. (The editor understands that there's another 500px left on your outer placeholder which should be filled, if the width of the next element fits exactly in it. If not, it will move downwards, aligned to the first image.

That's all it takes to make an image as a background. Do not use background-image property for your div. For some reasons, it doesn't work. It only appears blank when you save, and re-edit it.

← Previous Chapter Next Chapter →

Comments

You must be logged in to comment

Janmidget #1 Nov 6, 2017 17:20:30

I made my own code for chapter layout following some instructions in every tutorial I happen to scan here in aff but can you help me how to make a picture as text background? Every time I am following the <div tag with <img tag its just topping my text box. It didn’t turn out as BG and I’mma lil bit frustrated abt it.

Theartdevotee #2 Feb 6, 2017 02:22:22

Is the layouting on tumblr the same with aff?

Leonny #3 Apr 7, 2016 18:47:04

Chapter 7: I'm still confused about the float thingy-- like, does it save you time from writing the "margin border this" or smtg like that¿? It's been many months since I last coded.

slategrey #4 Apr 1, 2016 03:24:53

Chapter 5: Thanks for making this thread! Quick question though, does the positioning of the div apply the same even if you add links on it, or images? I don't use "float" generally as it doesn't work for me both for images and divs so I just use "margin" to position the boxes (I hate this part most in coding like for real since it's very hard to align them using margins, and although float seems easier, I can't make it work like GAH). I've seen you do the same with images and a div together (using margin) so no problem with that I guess, but how do I do it with two divs?