Inserting background image

Post Reply

4 posts Page 1 of 1

LgJJ

New member

Posts

Joined

Thu Jun 30, 2022 6:09 pm

Post by LgJJ » Sat Mar 11, 2023 12:05 am

I have to say that I am finding Opencart 3 much harder to work with than 2.5. I want to add a background image repeating on the nav bar/menu. I have uploaded my images in admin/catalog/view/theme/stinkytinkemporium/image.

I have added the background image code below:

Code: Select all

#menu {
	/*background-color: #4d84a8;*/
	/*background-image: linear-gradient(to bottom, #4d84a8, #33576e);*/
	background-image: url('/image/Nav blue.png');
	background-repeat: repeat-x;
	border-color: #1f90bb #1f90bb #145e7a;
	min-height: 40px;

Nothing has changed on the front end. www.stinkytinkemporium.co.uk

LgJJ

New member

Posts

Joined

Thu Jun 30, 2022 6:09 pm

Re: Inserting background image

by mona

Expert Member

Posts

3295

Joined

Mon Jun 10, 2019 9:31 am

Post by by mona » Sat Mar 11, 2023 12:13 am

http://stinkytinkemporium.co.uk/catalog ... 20blue.png

is not the correct path but the css code is correct

Screen Shot 2023-03-10 at 16.11.38.png (32.77 KiB) Viewed 610 times

NB: do not use spaces or special charachters in your image filenames.

Ok found it. This would be better, but using a tall thin image for a long narrow fill is not so good.
In addition it has a border - so that looks bad.

Code: Select all

background-image: url(http://stinkytinkemporium.co.uk/catalog/view/theme/stinkytinkemporium/image/Nav%20blue.png);
background-repeat: no-repeat;
background-size: cover;

and finally - you should use css linear gradient for something like that anyway.

DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.

https://www.youtube.com/watch?v=zXIxDoCRc84

by mona

Expert Member

Posts

3295

Joined

Mon Jun 10, 2019 9:31 am

Re: Inserting background image

pprmkr

Active Member

Posts

1701

Joined

Sat Jan 08, 2011 11:05 pm

Location

Netherlands

Post by pprmkr » Sat Mar 11, 2023 5:32 pm

Using tall image for menu does not show the gradient in that image. And on smaller screens when menu height changes, image does not look the same.
Better use linear-gradient:

Code: Select all

	background-color: #4d84a8;
	background-image: linear-gradient(to bottom, #4d84a8, #4d84a8, #4d84a8, #4d84a8, #487b9d, #42718f, #3c6782);
	background-repeat: repeat-x;

Repeating the same colercode results in larger area with that color.