maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-26 06:47:17 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

change the hero image and make it easier to customize with css

Browse source
This commit is contained in:
Janne Koivistoinen 2017-09-28 16:45:52 +03:00
parent 5eeef98b87
commit 39fb82dffe
2 changed files with 12 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
src/assets/background.jpg
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 243 KiB

After

Width:  |  Height:  |  Size: 846 KiB

25
src/marketplace.css
View file

@ -13,21 +13,20 @@
/* Full screen Background image located in root-folder/src/assets */
--backgroundImage: {
background-image: url("../../assets/background.jpg");
background-color: var(--matterColor);
background-size: cover;
background-position-y: center;
/*
This value is specific to the given image. The value is the
relative position of the interesting area in the x axis, counted
from the left side of the image.
/* Gradient direction and overlaying the black color on top of the image for better readability */
background:
linear-gradient(-45deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6)),
url("../../assets/background.jpg");
In the default image, this means the person sitting in the
sauna. This value ensures the person is approximately centered in
the viewport when the browser width changes.
*/
background-position-x: 80%;
/* Add loading color for the div */
background-color: var(--matterColor);
/* Cover the whole screen with the background image */
background-size: cover;
/* Align the image within the container */
background-position: center center;
}