Home Blog Introduction to Background Images

Introduction to Background Images

220
0
SHARE

Are you trying to create a significant visual enhancement on your pages? Great!

Today we will show you how to break the monotony by changing aesthetics with a simple background image. The options are available in tagDiv Composer, the frontend page builder designed for news websites. Don’t worry, no coding skills are needed! We’ll show you how you can do it right on the frontend with the click of the mouse.

With ionMag WordPress Theme, you can add background images to any rows or blocks and use either of them as a content separator. To maximize this effect, the row should be stretched, so it becomes even more visible.

Yes! You can add a background image on any content area row as you can choose to display anything on the block inside, like Must Read articles, Latest posts, or a widget that you like. Let’s get started! With the ionMag theme, for each background image, you can adjust the positioning, opacity, and color overlay.

Background Positioning

Background Image CSS box
CSS box

The tagDiv Composer opens when you click on the row you want to customize. You can access the advanced design settings in the CSS tab. You’ll also discover an image representation of your block with the available spacing options.

Starting with the interior, first, you have the Padding. This property generates space around the content, as the area inside the border needs a certain symmetry to look good.

After this comes the Border, which frames the row. You can change its style, color, and thickness. The Border style refers to the design, and it can be solid, dotted, dashed, double, and so on. You can test each of them and choose the one you prefer.

Ultimately, you have the Margin. This CSS property generates space around elements. If you’re new to web design or you just don’t want to get it wrong, go with symmetry. All the margins must be equivalent, but keep in mind that other elements in the same area might have their own margins. For example, the content area in which your row is placed has a 30px margin. When going through the CSS box, pay attention to the surrounding elements.

CSS Tab Padding and Margins
CSS editing

Moreover, for extra accuracy, ionMag lets you measure the size of the margin with a free tool like paint.net. All you have to do is make a print screen, paste it in paint.net and see the exact distance between elements.

IonMag theme supports full custom positioning. This means you can place the background image in different ways, depending on the visual effect you aim for. The four styles – cover, contain, repeat, and no repeat – refer to how the picture behaves in the space framing it.

Background Style Choices
Background Style

Also, if you have a large image, with the Background position you can choose to display only a specific part of it on your block. This could be focused on the top, center, bottom, or other parts of the picture.

The right combination for most is: 
style: cover

position: center top

Color overlay

Color Overlay
Color Overlay

Sometimes adding a picture is just not enough, the image’s hue intensity or the contrast don’t seem to match your imagination. This won’t be the case anymore since ionMag theme lets you use not one, but two colors to overlay your background image. You can mix and match the favorite colors for the desired effect and give your visitors engaging experiences on all website pages.

Opacity Editing

In most themes, changing the background opacity is a painful point. The result might not look how you imagined as the elements inherit the settings from their container. If you change the opacity for the image background, you have the nasty surprise to see the text fading transparent, simultaneously. ionMag WordPress News Theme doesn’t let this happen!

With values between 0 and 1, where

  • 1.0 is fully opaque
  • 0.5 is 50% transparent
  • 0.0 is 100% transparent,

you have the control. It’s easy to make the background transparent without modifying the elements inside that specific container.

Test all the combinations you like until you find the right balance to draw the attention on your most important sections while highlighting the essential information with the adequate contrast.

Opacity Editing
Don’t do this!
Opacity Editing
Try this instead!

Now that you mastered the initial process of adding an image or a color behind a block, it’s your turn to experiment with them. Share your experience with us in the comments below!

 

SHARE
Lisa Jones
Editor-in-chief of WPion. 100% passionate about WordPress, Lisa is part time web developer and part time front-end designer. With a master's degree in computer science, she is specialized in CSS, HTML, JavaScript, MySQL and PHP. Lisa uses her knowledge and experience to offer you a complete analysis of WordPress most popular themes and plugins.

LEAVE A REPLY