Magento 2 Theme Development Image to spread across home page
https://magento.stackexchange.com/questions/335387
-
16-04-2021 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
I can't figure out to spread a image across a screen.
It's in a block, which is then put into the cms home page.
Block;
<div><img id="intro-img" src="{{media url="images/eastbound-background-564cbfd8eab84769cf0690bd3e95de5a.png"}}" alt="Place Holder" width="300" height="150"></div>
<div class="homeSliderContent">
<h3 style="color: black; font-weight: 1000;">Some Msg</h3>
<p style="color: black;">Slogan To GO Here</p>
<div class="hsBtn">
<div class="hsBtn"><a title="Shop Now" href="shop.html">Shop Now</a></div>
</div>
</div>
CMS home page
<div class="homeSlider">{{block class="Magento\\Cms\\Block\\Block" block_id="home_main_banner"}}</div>
<div class="homepage_blocks">
<p>{{widget type="Magento\CatalogWidget\Block\Product\ProductsList" title="Featured" show_pager="0" products_count="10" template="Magento_CatalogWidget::product/widget/content/grid.phtml" conditions_encoded="^[`1`:^[`type`:`Magento||CatalogWidget||Model||Rule||Condition||Combine`,`aggregator`:`all`,`value`:`1`,`new_child`:``^],`1--1`:^[`type`:`Magento||CatalogWidget||Model||Rule||Condition||Product`,`attribute`:`featured`,`operator`:`==`,`value`:`1`^]^]"}}</p>
<p>{{widget type="Magento\Catalog\Block\Product\Widget\NewWidget" display_type="all_products" show_pager="0" products_count="10" template="product/widget/new/content/new_grid.phtml"}}</p>
</div>
CSS - app/design/frontend/Ozark/charlie/Magento_Theme/web/css/source/_module.less
// /**
// * Copyright © Magento, Inc. All rights reserved.
// * See COPYING.txt for license details.
// */
@import 'module/_collapsible_navigation.less';
//
// Theme variables
// _____________________________________________
// Messages
@message-global-note__color: @text__color;
@message-global-note__background: @color-yellow-light2;
@message-global-note-link__color: @link__color;
@message-global-note-link__color-hover: @link__hover__color;
@message-global-note-link__color-active: @link__active__color;
@message-global-note__border-color: @color-yellow-light3;
@message-global-caution__color: @color-white;
@message-global-caution__background: @color-red9;
@message-global-caution-link__color: @link__color;
@message-global-caution-link__color-hover: @link__hover__color;
@message-global-caution-link__color-active: @link__active__color;
@message-global-caution__border-color: none;
@header__background-color: @color-gray-middle4;
@header-panel__background-color: @color-gray-middle4;
@header-panel__text-color: @color-white;
@header-icons-color: #1979c3;
@header-icons-color-hover: @color-gray20;
@customer-welcome__z-index: @dropdown-list__z-index + 1;
@addto-color: @color-gray40;
@addto-hover-color: @primary__color;
@minicart-icons-color: @header-icons-color;
@minicart-icons-color-hover: @header-icons-color-hover;
@price-color: @color-gray34;
@price-size: 22px;
@price-size-desktop: 36px;
@button__shadow: inset 0 1px 0 0 rgba(255, 255, 255, 1), inset 0 -1px 0 0 fade(@border-color__base, 30); // Used for secondary button and catalog toolbar controls
@button__shadow-active: inset 0 1px 0 0 fade(@border-color__base, 80), inset 0 -1px 0 0 fade(@border-color__base, 30); // Used for secondary button and catalog toolbar controls
@h1__margin-bottom__desktop: @indent__xl;
// Footer
@footer__background-color: @color-gray-light01;
@footer-links-separator-border-color: @color-gray-light4;
@footer-links-color: @color-gray34;
@footer-links-color-hover: @color-gray20;
@footer-links-color-current: @primary__color__light;
// Layered navigation
@filter-title-background-color: @color-gray94;
@filter-link: @color-gray-darken4;
@filter-link-hover: darken(@filter-link, 30%);
@filter-quantity: @color-gray46;
//
// Common
// _____________________________________________
& when (@media-common = true) {
body {
.lib-css(background-color, @page__background-color);
}
.page-wrapper {
.lib-vendor-prefix-display(flex);
.lib-vendor-prefix-flex-direction(column);
min-height: 100vh; // Stretch content area for sticky footer
}
.page-main {
.lib-vendor-prefix-flex-grow(1);
}
.page-main {
> .page-title-wrapper {
.page-title {
hyphens: auto;
}
}
}
//
// Header
// ---------------------------------------------
.page-header {
.lib-css(background-color, @header__background-color);
border-bottom: none;
margin-bottom: @indent__base;
.panel.wrapper {
.lib-css(background-color, @header-panel__background-color);
.lib-css(color, @header-panel__text-color);
}
}
.header.panel {
> .header.links {
.lib-list-inline();
float: right;
font-size: 0;
margin-left: auto;
margin-right: @indent__base;
> li {
font-size: @font-size__base;
margin: 0 0 0 15px;
&.customer-welcome {
margin: 0 0 0 5px;
}
> a {
.lib-link(
@_link-color: @header-panel__text-color,
@_link-text-decoration: none,
@_link-color-visited: @header-panel__text-color,
@_link-text-decoration-visited: none,
@_link-color-hover: @header-panel__text-color,
@_link-text-decoration-hover: underline,
@_link-color-active: @header-panel__text-color,
@_link-text-decoration-active: underline
);
}
}
}
}
.header {
&.content:extend(.abs-add-clearfix all) {
padding-top: @indent__s;
position: relative;
}
}
.logo {
float: left;
margin: 0 0 @indent__s @indent__xl;
max-width: 50%;
position: relative;
z-index: 5;
img {
display: block;
height: auto;
}
.page-print & {
display: inline-block;
float: none;
}
}
.page-print {
.nav-toggle {
display: none;
}
}
.page-main {
> .page-title-wrapper {
.page-title + .action {
margin-top: @indent__l;
}
}
}
.action.skip {
&:not(:focus) {
&:extend(.abs-visually-hidden all);
}
&:focus {
.lib-css(background, @color-gray94);
.lib-css(padding, @indent__s);
box-sizing: border-box;
left: 0;
position: absolute;
text-align: center;
top: 0;
width: 100%;
z-index: 15;
}
}
.action-skip-wrapper {
height: 0;
position: relative;
}
//
// Global notice
// ---------------------------------------------
.message.global {
p {
margin: 0;
}
&.noscript,
&.cookie {
.lib-message(@_message-type: global-note);
margin: 0;
}
&.cookie {
bottom: 0;
left: 0;
position: fixed;
right: 0;
z-index: 3;
.actions {
margin-top: @indent__s;
}
}
&.demo {
.lib-message(@_message-type: global-caution);
margin-bottom: 0;
text-align: center;
}
}
//
// Footer
// ---------------------------------------------
.page-footer {
margin-top: @indent__m;
}
.ftrSociallinks{
text-align: right;
}
.footer {
&.content {
border-top: 1px solid @footer-links-separator-border-color;
padding-top: @indent__base;
ul:extend(.abs-reset-list all) {
}
.links {
> li {
.lib-css(background, @footer__background-color);
.lib-font-size(16);
border-top: 1px solid @footer-links-separator-border-color;
margin: 0 -@layout__width-xs-indent;
padding: 0 @layout__width-xs-indent;
}
a,
strong {
display: block;
padding: @indent__s 0;
}
strong {
.lib-css(color, @footer-links-color-current);
font-weight: normal;
}
a {
.lib-link(
@_link-color: @footer-links-color,
@_link-text-decoration: none,
@_link-color-visited: @footer-links-color,
@_link-text-decoration-visited: none,
@_link-color-hover: @footer-links-color-hover,
@_link-text-decoration-hover: underline,
@_link-color-active: @footer-links-color-hover,
@_link-text-decoration-active: underline
);
}
}
}
}
.copyright {
.lib-css(background-color, @copyright__background-color);
.lib-css(color, @color-white);
box-sizing: border-box;
display: block;
padding: @indent__s;
text-align: center;
}
.page-header,
.page-footer {
.switcher {
.options {
.lib-dropdown(
@_dropdown-actions-padding: 0,
@_dropdown-list-item-padding: 0,
@_dropdown-toggle-icon-content: @icon-down,
@_dropdown-toggle-active-icon-content: @icon-up,
@_icon-font-text-hide: true,
@_icon-font-size: 10px,
@_icon-font-line-height: 22px,
@_dropdown-list-min-width: 160px
);
ul.dropdown {
a {
.lib-link(
@_link-color: @color-gray20,
@_link-text-decoration: none,
@_link-color-visited: @color-gray20,
@_link-text-decoration-visited: none,
@_link-color-hover: @color-gray20,
@_link-text-decoration-hover: none,
@_link-color-active: @color-gray20,
@_link-text-decoration-active: none
);
display: block;
padding: 8px;
}
}
}
strong {
font-weight: @font-weight__regular;
}
.label {
&:extend(.abs-visually-hidden all);
}
}
}
.page-header {
.switcher {
.options {
ul.dropdown {
right: 0;
&:before {
left: auto;
right: 10px;
}
&:after {
left: auto;
right: 9px;
}
}
}
}
}
//
// Widgets
// ---------------------------------------------
.sidebar {
.widget.block:not(:last-child),
.widget:not(:last-child) {
margin-bottom: @indent__xl;
}
}
.widget {
clear: both;
.block-title {
font-size: 50px;
font-weight: bold;
vertical-align:middle;
text-align: center;
font-family: 'tinymce', Arial;
padding-bottom: 10px;
}
}
.page-header,
.page-footer {
.widget.block {
.lib-css(margin, @indent__base 0);
}
.links .widget.block {
margin: 0;
}
}
.no-display:extend(.abs-no-display all) {
}
//
// Calendar
// ---------------------------------------------
.ui-datepicker td {
padding: 0;
}
.ui-tooltip {
.lib-css(background, @tooltip__background);
border: @tooltip__border-width solid @tooltip__border-color;
padding: 10px;
}
.homeSlider{
position: relative;
.homeSliderContent{
margin: 0 auto;
max-width: 700px;
position: absolute;
left: 0;
right: 0;
top: 50%;
width: 100%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
h3{
color: #ffffff;
//font-family: @cursive-font;
font-size: 50px;
font-weight: 400;
letter-spacing: 2px;
line-height: 40px;
margin: 0;
text-align: center;
text-transform: uppercase;
}
p{
color: #ffffff;
//font-family: @cursive-font;
font-size: 30px;
letter-spacing: 2px;
line-height: 32px;
margin: 5px 0 0;
text-align: center;
text-transform: uppercase;
}
.hsBtn{
margin-top: 20px;
text-align: center;
a{
background: @header-icons-color;
border-radius: 50px;
color: #ffffff;
display: inline-block;
height: 48px;
line-height: 46px;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.1px;
padding: 0 40px;
text-transform: uppercase;
box-shadow: 0 2px 2px @header-icons-color-hover;
&:hover{
background: @header-icons-color-hover;
}
}
}
}
}
//
// Navigation
// _____________________________________________
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
.customer-name,
.customer-welcome + .authorization-link {
display: none;
}
.nav-sections .switcher-trigger strong:after {
.lib-font-size(16);
right: -25px;
top: -2px;
}
.navigation .parent .level-top:after {
.lib-font-size(16);
right: 10px;
top: 7px;
}
.page-footer .footer.content {
.switcher-store {
.lib-css(background, @footer__background-color);
.lib-font-size(16);
margin: 0 -@layout__width-xs-indent;
.switcher-options {
display: block;
ul.dropdown {
background: none;
border: 0;
box-shadow: none;
margin: 0;
position: relative;
&:before,
&:after {
display: none;
}
}
.switcher-trigger,
.switcher-option {
border-top: 1px solid @footer-links-separator-border-color;
display: block;
padding: @indent__s @layout-indent__width;
}
.switcher-trigger strong {
padding: @indent__s 0;
}
.switcher-option a {
padding: 0;
}
}
}
}
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
.logo {
margin-bottom: 13px;
margin-top: 4px;
}
}
//
// Mobile
// _____________________________________________
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
.cms-page-view .page-main {
padding-top: 0;
position: relative;
}
}
//
// Desktop
// _____________________________________________
.homepage_blocks{
.block-title strong{
font-size: 50px;
}
.product-item-details{
text-align: center;
.product-item-name{
font-size: 25px;
text-decoration: none;
}
.price{
font-size: 20px;
}
}
.product-item-actions{
display: none;
}
}
.homeSlider {
height: 700px;
overflow: hidden;
@media (max-width: 768px) {
background-image: url('../images/homeBanner.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
height: 400px;
}
img#intro-img {
position: absolute;
bottom: 0;
left: 0;
height: 100vh;
width: 100%;
object-fit: cover;
@media(max-width: 768px) {
display: none;
}
}
}
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
html,
body {
height: 100%; // Stretch screen area for sticky footer
}
.navigation ul {
padding: 0 8px;
}
.page-header {
border: 0;
margin-bottom: 0;
.panel.wrapper {
border-bottom: none;
.lib-css(background-color, @header-panel__background-color);
}
.header.panel:extend(.abs-add-clearfix-desktop all) {
padding-bottom: @indent__s;
padding-top: @indent__s;
}
.switcher {
float: right;
margin-left: 15px;
margin-right: -6px;
.lib-vendor-prefix-order(1);
}
}
.page-main {
> .page-title-wrapper {
.page-title {
display: inline-block;
}
.page-title + .action {
float: right;
margin-top: @indent__base;
}
}
}
.customer-welcome {
.lib-dropdown(
@_toggle-selector: ~'.action.switch',
@_options-selector: ~'ul',
@_dropdown-actions-padding: 0,
@_dropdown-list-item-padding: 0,
@_dropdown-toggle-icon-content: @icon-down,
@_dropdown-toggle-active-icon-content: @icon-up,
@_icon-font-text-hide: true,
@_icon-font-size: 10px,
@_icon-font-line-height: 22px,
@_dropdown-list-pointer-position: right,
@_dropdown-list-position-right: 0,
@_dropdown-list-z-index: @customer-welcome__z-index
);
li:extend(.switcher li all) {
a {
.lib-link(
@_link-color: @color-gray20,
@_link-text-decoration: none,
@_link-color-visited: @color-gray20,
@_link-text-decoration-visited: none,
@_link-color-hover: @color-gray20,
@_link-text-decoration-hover: none,
@_link-color-active: @color-gray20,
@_link-text-decoration-active: none
);
display: block;
line-height: 1.4;
padding: 8px;
}
}
.customer-name {
cursor: pointer;
}
.customer-menu {
display: none;
}
.action.switch {
.lib-button-reset();
.lib-css(color, @color-white);
}
.header.links {
min-width: 175px;
z-index: 1000;
}
&.active {
.action.switch {
.lib-icon-font-symbol(
@_icon-font-content: @icon-up,
@_icon-font-position: after
);
}
.customer-menu {
display: block;
}
}
.greet {
display: none;
}
}
.header {
&.panel {
> .header.links {
.lib-list-inline();
float: right;
margin-left: auto;
> li {
margin: 0 0 0 15px;
&.welcome,
> a {
display: inline-block;
line-height: 1.4;
}
&.welcome {
a {
.lib-css(color, @color-white);
.lib-css(padding-left, @indent__xs);
}
}
}
> .authorization-link {
&:after {
content: attr(data-label);
display: inline-block;
margin: 0 -@indent__xs 0 @indent__xs;
}
&:last-child {
&:after {
display: none;
}
}
}
> .customer-welcome + .authorization-link {
display: none;
}
}
}
&.content:extend(.abs-add-clearfix-desktop all) {
padding: @indent__l @indent__base 0;
}
}
.logo {
margin: -8px auto @indent__m 0;
img {
max-height: inherit;
}
}
.page-wrapper {
margin: 0;
position: relative;
transition: margin .3s ease-out 0s;
> .breadcrumbs,
> .top-container,
> .widget {
box-sizing: border-box;
width: 100%;
}
}
.page-footer {
.lib-css(background, @footer__background-color);
margin-top: auto;
padding-bottom: @indent__m;
.switcher {
.options {
ul.dropdown {
bottom: -@indent__s;
left: 100%;
margin: 0 0 0 @indent__base;
top: auto;
&:before,
&:after {
bottom: @indent__base - 7px;
left: auto;
right: 100%;
top: auto;
}
&:before {
.lib-css(border-color, transparent @dropdown-list__background transparent transparent);
}
&:after {
.lib-css(border-color, transparent @dropdown-list-pointer__border transparent transparent);
margin: 0 0 -1px -1px;
}
}
}
}
}
.footer {
&.content {
border-top: none;
.block {
float: left;
}
ul {
padding-right: 50px;
}
.switcher.store {
display: block;
margin: 0;
}
.links {
display: inline-block;
padding-right: 50px;
vertical-align: top;
li {
background: transparent;
border: none;
font-size: 14px;
margin: 0 0 8px;
padding: 0;
}
a,
strong {
display: inline;
}
}
}
}
.homeSlider{
h3{
font-size: 70px;
letter-spacing: 5px;
line-height: 64px;
}
.hsBtn{
margin-top: 15px;
a{
font-size: 18px;
height: 56px;
line-height: 54px;
padding: 0 70px;
}
}
}
}
What it looks like; (I'm trying to get it to cover the whole screen)
المحلول
The answer to this depends on the CSS and structure or your layout, it's likely that some parent elements in the dom have a max-width so setting something like width: 100% or width: 3000px won't help as it'll be restricted by that parent.
You can workaround this by using width: 100vw which will make the element stretch the full width of the screen. You'll notice one problem with this though, the element will start in it's current position so it will not be the result you expect. You can counteract this with margin-left: -xyz where xyzis the value required.
Summary
You can use width: 100vw alongside a negative value for margin-left.
Other options will be to:
- Move your homepage banner outside of the elements that contain a max-width value
- Use position: absolute along with various other fixes, not ideal.
- Remove the max-width from the parent container(s)
لا تنتمي إلى magento.stackexchange
