New course! Every coder should learn Generative AI!
Try a free lesson+ 2
Please how can I write a code for a page with image background and a button link?
18 Answers
+ 3
Here an example for you with some functionality:
https://code.sololearn.com/W0zH3IDDAEPP/?ref=app
+ 5
Sololearn is not a code writing service. If you need help with your own code ,please link your code.
+ 3
In the above code the easierst way is as I now did with css style for the button:
left: 40%;
+ 1
Are you referring to a web code?
You could start by doing the html course
+ 1
Frist, define a container in you HTML file like a div element and give it an optional class name 👇
<div class=“container”></div>
Second, inside your head element, write the following css code to target and style your defined container. 👇
<head>
<style>
.container {
Width: 100vw;
Height: 100vh;
background-image: url(“put your image address here”);
/* for centering your button*/
display: flex;
justify-content: center;
align-items: flex-end;
}
</style>
</head>
+ 1
I hope i could help!
+ 1
Please, is there a way to make the button centered and also placed at the bottom?
0
Please can you write a html sample for me?
0
I have been trying but it isn't coming right
0
I want the button link to be at the bottom center
0
For the button, you can write this code inside you defined div element at first👇
<div class=“container”>
<button>
<a href=“write your link here”>link name</a>
</button>
</div>
0
I'm grateful sir
0
No problem.
0
Check this out, it's based on what you wrote.
https://www.sololearn.com/compiler-playground/WcVtvcky66xx
0
It won't open sir
0
I've shared a public playground, if it doesn't work for you I'll share it as a comment here.
HTML:
<div class="container">
<button>
<a href=“#”>Click Me</a>
</button>
</div>
CSS:
body {
margin: 0; padding: 0;
max-width: 100vw;
height: 100vh;
}
.container {
width: 100%;
height: 100%;
background-image: url("https://bit.ly/3hSeP9Q");
background-repeat: no-repeat;
background-size: cover;
background-position: center left;
/* for centering your button*/
display: flex;
justify-content: center;
align-items: flex-end;
padding-bottom: 100px;
}
button {
width: 90px;
padding: 10px 15px;
border: none;
font-weight: bold;
}
0
Thanks sir
0
You can study my code
https://code.sololearn.com/WASUAxm6ODs1/?ref=app
Often have questions like this?
Learn more efficiently, for free:
Hot today
Problem
0 Votes
USING HTML ONLY!!!
5 Votes
Effects on HTML and JavaScript
0 Votes
Programming sickness
3 Votes
Help. Помогите пожалуйста
1 Votes
Izzy the iguana
0 Votes