MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 32: | Line 32: | ||
background-image: url("https://uooutlands.com/wiki/images/1/11/gettingstarted1a.jpg"); /* The image used */ | background-image: url("https://uooutlands.com/wiki/images/1/11/gettingstarted1a.jpg"); /* The image used */ | ||
background-color: #cccccc; /* Used if the image is unavailable */ | background-color: #cccccc; /* Used if the image is unavailable */ | ||
height: | height: 400px; /* You must set a specified height */ | ||
background-position: center; /* Center the image */ | background-position: center; /* Center the image */ | ||
background-repeat: no-repeat; /* Do not repeat the image */ | background-repeat: no-repeat; /* Do not repeat the image */ | ||
Revision as of 16:18, 27 April 2021
/* CSS placed here will be applied to all skins */
* {
box-sizing: border-box;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
.hero-image {
background-image: url("https://uooutlands.com/wiki/images/1/11/gettingstarted1a.jpg"); /* The image used */
background-color: #cccccc; /* Used if the image is unavailable */
height: 400px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}