After adding a basic page title for your website pages you may consider adding a background image to the page title as it makes the header look more interesting. Not only it adds visual appeal but you can use a product or service relevant image as well. Maybe something that visually relates to or explains your product/service/brand in some way.
Just click on the “Select Image” button available under the Image “label” for changing the image. You will be able to preview it in the customizer preview screen. If you want to change an image, you can click at the “Change Image” button right beneath the currently displayed image. You can also remove an image by clicking on the “Remove” button next to the Change Image button.
Change the Breadcrumb and Title Position
You get a special breadcrumb and page title positioning control with “Background Image” style. You can either position both of it at left, center or right, overriding the breadcrumbs default positioning as well.
The styles can be quickly changed just by clicking on the three provided buttons under the “Title/Breadcrumb Position” label.
Change the Background Image Position
It’s recommended to use a high-quality image. As it’s the main header space and visitors are going to judge the site quality based on visuals too.
As you may know, uploading images to digital spaces may get the image cropped to best fit into available space. So you may have an image where you want to include specific dimensions to make the most sense with the image.
The following control lets you select the portion of the image to align the image accordingly in the given space. The provided options cover all the image dimensions, namely
- Top Left
- Top Center
- Top Right
- Center Left
- Center Center
- Center Right
- Bottom Left
- Bottom Center
- Bottom Right
Just click on the dropdown menu under “Attachment” label, and choose any of the options that best fits your image and blends well with the overall design.
Change the Attachment Feature of the Background Image
There are two attachment types for the background image, these are
- It creates what’s commonly known as a parallax effect.
- The background images move past the camera slower than foreground images.
- Basically, it seems as if the image stays fixed as you scroll over the page.
- Whereas the content changes place up and down accordingly.
- The default behavior of images
- Where the image and content shifts place together, moves up and down accordingly.
Change the Background Repeat Feature
You may have a small image that you want to use for the background. But that small image alone doesn’t look good either from an alignment perspective nor the aesthetic sense.
It could either be a logo, your favicon, initials of a product/service, a mascot or anything of such a creative sort. You can use these four available options to creatively expand and repeat your artwork.
- It’s the default option if you’re using a background image and want to use it as it is.
- Let’s you to repeat the image both in the horizontal and vertical axis as well.
- To repeat the image only in the horizontal (X) axis.
- To repeat the image only in the vertical (Y) axis.
Change the Background Size
You can use the pre-set options for the background size to change it. The available options are
- It auto adjusts the image based on the image dimensions and available background space.
- It prioritizes the available space to enlarge the image as much as to fill all the available space.
- It displays the complete image, at the cost of not accounting for available space.
If you want to change it, just click on the drop-down under the “Size” label and choose your desired option. Otherwise, the default suits most images.
Change the Image Height
As you change the image height, you are actually changing the background height for the page title/breadcrumb. So you can alter image height in pixels to either have a sleek header space or a take up a large portion of the screen. It’s up to you, whatever fits your design and purpose.
You can use the slider under “Height (px)” label to adjust the image height and can preview it at the same time.
Change the Image Overlay Opacity
You can apply a color over an image (black by default) and use this option to set the opacity for the overlay. You can decide how much color opaqueness best fits your design, background, site, and brand.
Using the slider under the “Overlay Capacity” label, you can easily change the opacity anywhere from 0 to 1.
- 0 is no opacity (transparent)
- 1 to be completely opaque (solid color).
Change the Image Overlay Color
Just the way you can set the overlay opacity. You can change the overlay color as well.
Simply click over the “Select Color” button under the “Overlay Color” label to change the overlay color to your desired ones.
If you can’t see the image overlay color change in the live preview. Make sure that your “Overlay Opacity” is at least 0.1 to make the color visible.