18
Replies
To create a background, use the CSS background property.
Below is a working example. No tables required.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Centering with CSS Grids</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
body, html {
margin: 0;
width:100%;
height: 100%;
display: grid;
background: #333 url(https://placeimg.com/1200/900/nature) no-repeat center center;
background-size: cover;
}
.container {
padding: 2%;
width: 75%;
text-align: center;
margin: auto;
background-color: rgba(0,0,0,0.5);
color: #FFF;
font-size: calc(16px + 1vw);
line-height: calc(1.75em + 0.5vw);
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to CSS Grids!</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>I'm vertically & horizontally centered.</p>
</div>
</body>
</html>
Given that this is the Dreamweaver product forum, it's interesting that your tutorial features XD and VS Code (or Sublime) instead of Dreamweaver.
This space rarely gets asked about XD. It might be helpful for prototyping complex apps but it seems like overkill for basic web page layouts.
By @Nancy OShea
Its not bad for a beginner level developer. At least it doesnt go straight for the cancerous css/front-end frameworks, command line npm install of bloated node modules, bundlers etc.
Not sure about Sketch being more popular than Figma though. I've never seen anyone use Sketch.
With just 3 steps in DW, I can't think of any less complicated way to get started that still affords users the freedom to design what they want and host on any server they choose.
By @Nancy OShea
Apart from nothing much is learnt by just dumping something in the code editor. I call it 'cancerous' because its been spreading a lot and eventually kills the ability to do anything for ones self, apart from adding a few css styles from a list which is readily available.
I've got absolutely nothing good to say about Wix, thats for sure. Webflow well I think thats a little different because you do need to know html and css to get that to work. But its not something that I would use because of what you mention regarding, hosting (although I believe you can aquire the code and host it elsewhere), pricing, its not a stand-alone desktop application, etc
Apart from nothing much is learnt by just dumping something in the code editor. I call it 'cancerous' because its been spreading a lot and eventually kills the ability to do anything for ones self...
By @osgood_
=====
No worse than copying & pasting random bits of code from CodePen. There's no cause/effect between using frameworks and human ignorance. People have a willingness to learn or they don't. You can't make people smarter by telling them not to use frameworks. Offering them a red pill or blue pill, perhaps. But as yet, that's only in movies. 🙂
No worse than copying & pasting random bits of code from CodePen. There's no cause/effect between using frameworks and human ignorance. People have a willingness to learn or they don't. You can't make people smarter by telling them not to use frameworks. Offering them a red pill or blue pill, perhaps. But as yet, that's only in movies. 🙂
By @Nancy OShea
I agree and I don't advise anyone should just copy and paste from anywhere if they dont have at least some knowledge of what it is and what it does. It's far better to have an understand of a workflow you are using rather than just copying/pasting, that wont get you anywhere if you want to learn the process of development.
Of course you can make people smarter by telling them to avoid frameworks, they actually get to learn, which will assist them in the future when a framework doesnt actually do what they require. This is all very subjective because many poeple, especially in this forum, are just building out a one off website, with no intention of extending their journey beyond that, in which case just use anything to get the job done, usually pretty badly, but if you want to extend your journey its advisable to learn what you are doing rather than just relying on copying/pasting, at some point, sooner rather than later I would suggest, that isnt going to be enough.
Given that this is the Dreamweaver product forum, it's interesting that your tutorial features XD and VS Code (or Sublime) instead of Dreamweaver.
By @Nancy OShea
This is an official Adobe announcement
No mention of Dreamweaver.
AdChoices