Displaying an image Behind the header Title - any tuto?

Wappler General Need Help
1

Hi helpers :),
mmm… I cant find the way to place a background image (code lines) behind my Title : “Your Website” on the Heaer section of the page ?
any tutos about this ?
…most of what I found only explain how to display images frames under the Title.
…or more sofisticated sliding section effects… :frowning:

background%20image
background image.jpg1838×506 409 KB

Tks

2

The following CSS may help:

.profile-cover_Background {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
padding: 2px 2px 2px 2px;
border-radius: 5px 5px 0 0;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: end;
-webkit-box-pack: end;
justify-content: flex-end;
overflow: hidden;
background: url("…/images/Background.jpg") no-repeat;
background-size: cover;
}

3

Thanks Dave,
As a non CSS user, I found some code here : Image backgrounds

That very simple code does display the image but only part of it.
… it doesnt “zoom out” or resize the image to the Title frame size , so I only get to see the top left corner of the background image…instead of the full pic.

STYLE%20IMAGE

I will add your code to see how it changes the image display…

tkx.

1 Like
4

CSS is among the greatest things us designers have at our disposal :slight_smile:

5

Create yourself an external style.css rather than use inline styles in the page, that way if you want to make a change site-wide you only have to edit the single file.

:wink:

6

Huray, I added the backgroundSize: Cover and its much better now.
Tks.

My view is that there is so much things in CSS to deal with , I would rather use database tables and DragDrop and popups to deal with it.
The less I have to get inside Code editors the faster I can work.

I also focus more on database funcionalities rather than on aestetical/design for this project, so thats why…

1 Like